{"__symbolic":"module","version":4,"metadata":{"KanbanModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":85,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":87,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":88,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":89,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":90,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":91,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":92,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":93,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":94,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":95,"character":4},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":96,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":97,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":98,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":99,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":100,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":101,"character":4},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":102,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":103,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":104,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":105,"character":4},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":106,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":107,"character":4},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":108,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":109,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":110,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":111,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":112,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":113,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":114,"character":4},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":115,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":116,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":117,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":118,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":119,"character":4},{"__symbolic":"reference","module":"@swimlane/ngx-dnd","name":"NgxDnDModule","line":120,"character":4}],"declarations":[{"__symbolic":"reference","name":"KanbanContainerComponent"},{"__symbolic":"reference","name":"KanbanHeaderComponent"},{"__symbolic":"reference","name":"KanbanBodyComponent"},{"__symbolic":"reference","name":"KanbanHeaderGridComponent"},{"__symbolic":"reference","name":"KanbanSearchComponent"},{"__symbolic":"reference","name":"KanbanSearchAdvancedComponent"},{"__symbolic":"reference","name":"KanbanSearchSavedComponent"},{"__symbolic":"reference","name":"KanbanSearchTagFilterDataComponent"},{"__symbolic":"reference","name":"KanbanSearchAdvancedFormComponent"},{"__symbolic":"reference","name":"KanbanSearchContainerComponent"},{"__symbolic":"reference","name":"KanbanOrderListViewComponent"},{"__symbolic":"reference","name":"KanbanViewContainerComponent"},{"__symbolic":"reference","name":"KanbanViewCardComponent"},{"__symbolic":"reference","name":"KanbanAddEditSwimLaneComponent"},{"__symbolic":"reference","name":"KanbanFilterBarComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"KanbanAddSavedSearchModalComponent"},{"__symbolic":"reference","name":"KanbanSearchCardComponent"},{"__symbolic":"reference","name":"KanbanConfirmationModalComponent"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"KanbanProductsListComponent"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"}],"exports":[{"__symbolic":"reference","name":"KanbanContainerComponent"},{"__symbolic":"reference","name":"KanbanHeaderComponent"},{"__symbolic":"reference","name":"KanbanBodyComponent"},{"__symbolic":"reference","name":"KanbanHeaderGridComponent"},{"__symbolic":"reference","name":"KanbanSearchComponent"},{"__symbolic":"reference","name":"KanbanSearchAdvancedComponent"},{"__symbolic":"reference","name":"KanbanSearchSavedComponent"},{"__symbolic":"reference","name":"KanbanSearchTagFilterDataComponent"},{"__symbolic":"reference","name":"KanbanSearchAdvancedFormComponent"},{"__symbolic":"reference","name":"KanbanSearchContainerComponent"},{"__symbolic":"reference","name":"KanbanOrderListViewComponent"},{"__symbolic":"reference","name":"KanbanViewContainerComponent"},{"__symbolic":"reference","name":"KanbanViewCardComponent"},{"__symbolic":"reference","name":"KanbanAddEditSwimLaneComponent"},{"__symbolic":"reference","name":"KanbanFilterBarComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"KanbanAddSavedSearchModalComponent"},{"__symbolic":"reference","name":"KanbanSearchCardComponent"},{"__symbolic":"reference","name":"KanbanConfirmationModalComponent"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"KanbanProductsListComponent"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"}],"entryComponents":[{"__symbolic":"reference","name":"KanbanConfirmationModalComponent"},{"__symbolic":"reference","name":"KanbanAddSavedSearchModalComponent"}]}]}],"members":{}},"KanbanAddEditSwimLaneComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"anterasoftware-kanban-add-edit-swimlane","template":"<div class=\"dialog-content-wrapper\">\r\n    <mat-toolbar matDialogTitle class=\"mat-accent m-0\">\r\n        <mat-toolbar-row>\r\n            <div><h2 *ngIf=\"editFlag; else newTitle\" class=\"swimlane-header\"> Edit Swimlane </h2>\r\n                <ng-template #newTitle>\r\n                    <h2 class=\"swimlane-header\"> Add Swimlane</h2>\r\n                </ng-template></div>\r\n        </mat-toolbar-row>\r\n    </mat-toolbar>\r\n\r\n    <mat-dialog-content class=\"p-24 m-0\">\r\n\r\n        <form fxLayout=\"column\" class=\"swimlane-modal-container\" [formGroup]=\"swimLaneForm\" fxLayoutAlign=\"space-between\">\r\n            <mat-form-field>\r\n                <mat-label> Label </mat-label>\r\n                <input formControlName=\"label\" matInput placeholder=\"Label\" />\r\n                <mat-hint class=\"hint\"> Please provide a unique name for this swimlane. </mat-hint>\r\n            </mat-form-field>\r\n        \r\n            <mat-form-field class=\"mt-20\">\r\n                <mat-label> Select Position </mat-label>\r\n                <mat-select formControlName=\"position\" placeholder=\"Select Position\">\r\n                    <mat-option *ngFor=\"let position of positionList\" [value]=\"position\">\r\n                        {{position}}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n\r\n            <div class=\"flex-inline-box\">\r\n                <ng-container>\r\n                    <mat-checkbox  formControlName=\"dropOff\"></mat-checkbox>\r\n                </ng-container>\r\n                Drop items off after\r\n                <mat-form-field class=\"mt-20\">\r\n                    <mat-label> Select Hours </mat-label>\r\n                    <mat-select formControlName=\"dropOffHour\" placeholder=\"Select\">\r\n                        <mat-option *ngFor=\"let hours of hoursList\" [value]=\"hours.value\">\r\n                            {{hours.label}}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n                when items are added\r\n            </div>\r\n        </form>\r\n        \r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions class=\"m-0 p-16\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n            <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn mat-raised-button mat-accent\" > Save </button>\r\n            <button mat-button (click)=\"onClose()\" class=\"cancel-btn mat-raised-button mat-accent\"> Cancel </button>\r\n        </div>\r\n\r\n    </mat-dialog-actions>\r\n</div>\r\n","styles":[".swimlane-modal-container{height:100%}.swimlane-modal-container .header-container{padding-left:10px;min-height:40px}.swimlane-modal-container .header-container .swimlane-header{color:#0a6082;font-family:Roboto;font-size:20px}.swimlane-modal-container .header-container .horizontal-line{margin-left:-33px;margin-right:-23px}.swimlane-modal-container .cancel-btn{color:#1c7db9}.swimlane-modal-container .save-btn{background-color:#332323;color:#fff;border:1px #707070}.swimlane-modal-container .hint{font-style:italic}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":12,"character":104},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":12,"character":111}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":12,"character":26},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"KanbanAddEditSwimLaneComponent"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"setFormValues":[{"__symbolic":"method"}],"onSave":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}]}},"KanbanBodyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"antera-lib-kanban-body","template":"<p>kanban-body works!</p>\r\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"KanbanContainerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"antera-lib-kanban-container","template":"<p>kanban-container works!</p>\r\n\r\n<div class=\"ui three doubling stackable cards\">\r\n    <div class=\"ui card\">\r\n      <div class=\"image\">\r\n        <div class=\"ui placeholder\">\r\n          <div class=\"square image\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content\">\r\n        <div class=\"ui placeholder\">\r\n          <div class=\"header\">\r\n            <div class=\"very short line\"></div>\r\n            <div class=\"medium line\"></div>\r\n          </div>\r\n          <div class=\"paragraph\">\r\n            <div class=\"short line\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"extra content\">\r\n        <div class=\"ui disabled primary button\">Add</div>\r\n        <div class=\"ui disabled button\">Delete</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n<!-- <antera-lib-kanban-body>\r\n\r\n</antera-lib-kanban-body>\r\n<antera-lib-kanban-header>\r\n\r\n</antera-lib-kanban-header> -->\r\n\r\n<!-- <ng-content></ng-content>\r\n<ng-content></ng-content> -->","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"KanbanFilterBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"antera-software-kanban-filter-bar","template":"<div *ngIf=\"filterList?.length > 0\" fxLayout=\"row\" class=\"filter-bar-whole-container\">\r\n    <div fxLayoutAlign=\"space-between\" class=\"filter-bar-content\">\r\n        <span class=\"filter-title\"> Currently Filtering By: </span>\r\n        <div fxLayout=\"row\" class=\"chip-space-between\">\r\n            <mat-chip-list aria-labal=\"filter list\">\r\n                <mat-chip *ngFor=\"let filter of filterList;\" [removable]=\"removeBtn\" (removed)=\"removeFilter(filter)\">\r\n                 <span fxLayout=\"row\"> <p *ngIf=\"filter.key !== 'search'\" class=\"tag-key\"> {{ filter.key | orderColumnNameMapper : page : mappingFields }} </p>\r\n                  <p *ngIf=\"filter.key !== 'search'\">: </p>\r\n                  <p *ngIf=\"filter.key !== 'tag'\" class=\"tag-value\">  {{ filter.value }} </p>\r\n                  <p *ngIf=\"filter.key === 'tag'\" class=\"tag-value\">  {{ filter.optionalValue }} </p>\r\n                </span>\r\n                  <mat-icon matChipRemove *ngIf=\"removeBtn\">cancel</mat-icon> </mat-chip>\r\n            </mat-chip-list>\r\n        </div>\r\n        <div fxLayoutGap=\"6px\" class=\"btn-container\" >\r\n            <span class=\"underline pointer\" (click)=\"clearAll()\"> CLEAR ALL </span>\r\n            <span class=\"underline pointer\" (click)=\"saveSearch()\"> SAVE SEARCH</span>\r\n            <span *ngIf=\"!showUpdateSearchFlag\" class=\"underline pointer\" (click)=\"updateSavedSearch()\"> UPDATE THIS SEARCH </span>\r\n        </div>\r\n    </div>\r\n</div>\r\n","styles":[".filter-bar-whole-container{background-color:#f4f4f4;border-color:#000;min-height:42px;width:100%;padding-left:10px}.filter-bar-whole-container .filter-bar-content{min-width:40%;align-items:center!important;padding:5px}.filter-bar-whole-container .filter-bar-content .filter-title{color:#797979;font-size:14px;font-family:Roboto}.filter-bar-whole-container .filter-bar-content .mat-chip{background-color:#fff}.filter-bar-whole-container .filter-bar-content .chip-space-between{padding:0 10px}.filter-bar-whole-container .btn-container{min-width:20%}.tag-key{color:#008fcc}.tag-value{padding-left:3px}.pointer{cursor:pointer}.underline{text-decoration:underline}p{margin:0}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"filterList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"showUpdateSearchFlag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"onClearAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"saveSearchResult":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"onRemoveFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"onUpdateExistingSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"clearAll":[{"__symbolic":"method"}],"saveSearch":[{"__symbolic":"method"}],"removeFilter":[{"__symbolic":"method"}],"updateSavedSearch":[{"__symbolic":"method"}]}},"KanbanHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"antera-lib-kanban-header","template":"<ng-container></ng-container>","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"KanbanHeaderGridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"antera-lib-kanban-header-grid","template":"\r\n<mat-toolbar>\r\n  <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between\">\r\n    <h4 class=\"header-title\"> {{ title }} </h4>\r\n\r\n\r\n    <form id=\"kanban-header-form\" [formGroup]=\"simpleSearchForm\">\r\n\r\n      <!-- <span class=\"horizontal-divider\"></span> -->\r\n\r\n      <div id=\"kanban-search-grid\">\r\n\r\n        <div id=\"antera-kanban-header-grid-search\">\r\n          <mat-form-field id=\"antera-search\" class=\"search-full-width search-option\" appearance=\"fill\">\r\n            <span matPrefix>\r\n              <mat-icon>search</mat-icon>\r\n            </span>\r\n            <input type=\"search\" formControlName=\"searchTerm\" matInput placeholder=\"Search\" />\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div id=\"antera-kanban-header-grid-filter\"  class=\"filter-drop-down\">\r\n          <mat-form-field appearance=\"fill\" class=\"search-scope-options filter-options\">\r\n            <mat-label> Filters </mat-label>\r\n            <mat-select formControlName=\"searchScope\">\r\n              <mat-option *ngFor=\"let item of scopeOptions\" [value]=\"item\">\r\n                {{item | orderColumnNameMapper : page : mappingFields}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div id=\"antera-kanban-header-grid-search-btn\">\r\n          <button class=\"search-button\" (click)=\"simpleSearch()\" mat-button>Search</button>\r\n        </div>\r\n\r\n        <div id=\"antera-kanban-header-grid-advanced-search\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"advancedSearch\" aria-label=\"Advanced Search\">\r\n            <mat-icon > more_vert</mat-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <div id=\"antera-kanban-header-grid-dates-filter\">\r\n          <button mat-icon-button [matMenuTriggerFor]=\"dueDate\" aria-label=\"\">\r\n            <mat-icon>event</mat-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <div id=\"antera-kanban-header-grid-add-btn\" *ngIf=\"title != 'Leads'\">\r\n\r\n          <button *ngIf=\"addBtnList?.length === 1; else buttonListTmp\"\r\n                  id=\"add-item-btn\"\r\n                  mat-raised-button\r\n                  color=\"primary\"\r\n                  (click)=\"addBtnClicked(addBtnList[0].value)\">\r\n            <mat-icon>add</mat-icon>\r\n              Add\r\n          </button>\r\n          <ng-template #buttonListTmp>\r\n            <button id=\"add-item-btn\" mat-raised-button color=\"primary\" [matMenuTriggerFor]=\"addMoreItems\">\r\n              <mat-icon>add</mat-icon>\r\n                Add\r\n            </button>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div id=\"antera-kanban-header-grid-add-btn\" *ngIf=\"title == 'Leads'\">\r\n          <button id=\"add-item-btn\" mat-raised-button color=\"primary\" (click)=\"addModule()\">\r\n            <mat-icon>add</mat-icon>\r\n              Add\r\n          </button>\r\n        </div>\r\n\r\n\r\n\r\n        <!-- <mat-grid-tile id=\"antera-kanban-header-grid-clear-btn\" class=\"\" [class.clear-all-btn]=\"title != 'Products'\"\r\n        [class.product-clear-all-btn]=\"title == 'Products'\"  colspan=\"1\" rowspan=\"1\">\r\n            <h6 *ngIf=\"showClearAllBtn\" class=\"clear-all-title\" (click)=\"onClearAllClicked()\"> Clear All </h6>\r\n        </mat-grid-tile> -->\r\n\r\n        <div id=\"antera-kanban-header-grid-product-search-btn\" *ngIf=\"title == 'Products'\">\r\n          <button id=\"product-search-btn\" mat-raised-button color=\"primary\" (click)=\"advanceProductSearch()\">\r\n            Product Search\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"view-my-item-grid-tile\" id=\"\" *ngIf=\"title != 'Production'\" [class.grid-view-my-item]=\"title == 'Artwork' || title == 'Accounts' || title == 'Leads' || title == 'Quotes' || title == 'Orders'\"  >\r\n          <mat-checkbox class=\"view-items-position\" (change)=\"toggleViewMyItems($event)\" [checked]=\"viewMyItems\"> View My Items</mat-checkbox>\r\n        </div>\r\n\r\n        <div class=\"summary-billing-tile js\" id=\"\" *ngIf=\"title === 'Orders' && showSummaryBilling\" [class.grid-view-my-item]=\"title == 'Orders'\"  >\r\n          <mat-checkbox class=\"summary-billing-position\" (change)=\"toggleSummaryBilling($event)\" [checked]=\"summaryBilling\"> Summary Billing</mat-checkbox>\r\n        </div>\r\n\r\n        <!-- <div class=\"view-my-item-grid-tile\" id=\"\" *ngIf=\"title == 'Orders'\" [class.grid-resync-btn]=\"title == 'Orders'\"  >\r\n          <mat-checkbox class=\"view-items-position\" (change)=\"toggleResyncQBO($event)\" [checked]=\"reSynceNeeded\"> Resync</mat-checkbox>\r\n        </div> -->\r\n\r\n      </div>\r\n\r\n    </form>\r\n\r\n    <span fxLayoutAlign=\"end center\">\r\n      <mat-button-toggle-group *ngIf=\"title == 'Products'\" class=\"search-button-toggle-group\" fxFlex=\"none\"\r\n        [value]=\"defaultProductView\" (change)=\"changeProductView($event)\">\r\n        <mat-button-toggle value=\"List View\" matTooltip=\"List View\">\r\n            <mat-icon>view_list</mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle value=\"Thumbnail View\" matTooltip=\"Thumbnail View\">\r\n            <mat-icon>featured_video</mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle value=\"Kanban View\" matTooltip=\"Kanban View\">\r\n          <mat-icon>featured_play_list</mat-icon>\r\n      </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n\r\n      <mat-button-toggle-group *ngIf=\"title == 'Artwork' || title == 'Accounts' || title == 'Leads' || title == 'Quotes' || title == 'Orders' || title == 'Opportunities' || title == 'Contacts'\" class=\"search-button-toggle-group\" fxFlex=\"none\"\r\n        [value]=\"defaultModuleView\" (change)=\"changeView($event)\">\r\n        <mat-button-toggle value=\"List View\" matTooltip=\"List View\">\r\n            <mat-icon>view_list</mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle value=\"Kanban View\" matTooltip=\"Kanban View\">\r\n            <mat-icon>featured_play_list</mat-icon>\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n\r\n      <mat-button-toggle-group *ngIf=\"title == 'Production'\" class=\"search-button-toggle-group\" fxFlex=\"none\"\r\n        [value]=\"viewMode\" (change)=\"changeProductionView($event)\">\r\n        <mat-button-toggle value=\"List View\" matTooltip=\"List View\">\r\n            <mat-icon>view_list</mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle value=\"Schedule View\" matTooltip=\"Schedule View\">\r\n          <mat-icon>schedule</mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle value=\"Machine View\" matTooltip=\"Machine View\">\r\n          <mat-icon>group_work</mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle value=\"Status View\" matTooltip=\"Status View\">\r\n          <mat-icon>featured_play_list</mat-icon>\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n\r\n      <button *ngIf=\"title != 'Products' && title != 'Production' && title != 'Artwork' && title != 'Orders' && title != 'Leads' && title != 'Quotes' && title != 'Accounts' && title != 'Opportunities' && title != 'Contacts'\" mat-icon-button (click)=\"displayKanbanPage()\" class=\"example-icon favorite-icon\" aria-label=\"list menu\">\r\n        <mat-icon>list</mat-icon>\r\n      </button>\r\n      <button mat-icon-button class=\"example-icon\" [matMenuTriggerFor]=\"settingList\" aria-label=\"Settings\">\r\n        <mat-icon>settings</mat-icon>\r\n      </button>\r\n    </span>\r\n\r\n  </mat-toolbar-row>\r\n</mat-toolbar>\r\n\r\n<mat-menu #settingList>\r\n  <button mat-menu-item *ngFor=\"let option of cogList\" (click)=\"onSettingListChange(option)\">\r\n      {{option}}\r\n  </button>\r\n  <button mat-menu-item [matMenuTriggerFor]=\"enableViewList\" *ngIf=\"moduleViewOptionsList.length > 0\"> Default View </button>\r\n  <button mat-menu-item [matMenuTriggerFor]=\"defaultViewList\"> Column Settings </button>\r\n  <button mat-menu-item (click)=\"onResetColumns.emit()\"> Reset Columns </button>\r\n\r\n\r\n</mat-menu>\r\n\r\n<mat-menu #enableViewList=\"matMenu\">\r\n  <div>\r\n    <!-- <button mat-menu-item (click)=\"$event.stopPropagation()\">\r\n      <mat-radio-group  [(ngModel)]=\"selectedView\" *ngFor=\"let option of moduleViewOptionsList\">\r\n        <mat-radio-button  [value]=\"option\" (change)=\"changeModuleView($event)\"> {{ option }} </mat-radio-button>\r\n      </mat-radio-group>\r\n    </button> -->\r\n    <mat-list role=\"list\">\r\n      <mat-list-item class=\"module-item\" role=\"listitem\" *ngFor=\"let option of moduleViewOptionsList; let i = index\">\r\n        <mat-radio-button color=\"primary\" [checked]=\"option == defaultProductView\" [value]=\"option\" (change)=\"changeModuleView($event.value)\">\r\n          {{option}}\r\n        </mat-radio-button>\r\n      </mat-list-item>\r\n    </mat-list>\r\n  </div>\r\n</mat-menu>\r\n\r\n<mat-menu #defaultViewList>\r\n  <div cdkDropList (cdkDropListDropped)=\"onColumnListReorder($event)\">\r\n    <button mat-menu-item *ngFor=\"let option of enableViewOptionsList\" (click)=\"$event.stopPropagation()\" cdkDropList (cdkDropListDropped)=onReorderColumnList($event) cdkDrag>\r\n        <mat-icon cdkDragHandle >drag_indicator</mat-icon>\r\n        <mat-checkbox [(ngModel)]=\"option.value\" class=\"menu-column-label\" (change)=\"onEnableViewOptions()\"> {{ option.key | orderColumnNameMapper: page : mappingFields }}  </mat-checkbox>\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<mat-menu #dueDate=\"matMenu\">\r\n  <div *ngIf=\"title == 'Artwork' || title == 'Production' || title != 'Opportunities' || title != 'Products' || title != 'Orders' || title != 'Leads' || title != 'Quotes' || title != 'Accounts' || title != 'Contacts'\">\r\n    <button *ngFor=\"let option of calendarOptionsList\" (click)=\"onCalendarListClick(option)\" mat-menu-item>\r\n      <mat-icon [ngStyle]=\"{'color':option.color}\"> date_range </mat-icon>\r\n      <span> {{ option.value }} </span>\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"title != 'Artwork' && title != 'Production' && title != 'Opportunities' && title != 'Products' && title != 'Orders' && title != 'Leads' && title != 'Quotes' && title != 'Accounts' && title != 'Contacts'\">\r\n    <button *ngFor=\"let option of calendarOptionsList\" (click)=\"onCalendarListClick(option)\" mat-menu-item>\r\n      <mat-icon> date_range </mat-icon>\r\n      <span> {{ option }} </span>\r\n    </button>\r\n  </div>\r\n  <mat-form-field appearance=\"fill\" class=\"calendar-type-container\" (click)=\"$event.stopPropagation()\">\r\n    <mat-select [(value)]=\"selectedCalendar\" (click)=\"$event.stopPropagation()\" (selectionChange)=\"onCalendarTypeChange()\">\r\n      <mat-option *ngFor=\"let calendarType of calendarTypeList\" [value]=\"calendarType\">{{ calendarType | orderColumnNameMapper: page : mappingFields }}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</mat-menu>\r\n\r\n<mat-menu #advancedSearch=\"matMenu\">\r\n  <button mat-menu-item (click)=\"openSearch('ADVANCED_SEARCH')\">\r\n    <mat-icon>date_range</mat-icon>\r\n    <span>Advanced Search</span>\r\n  </button>\r\n  <button mat-menu-item (click)=\"openSearch('SAVED_SEARCH')\">\r\n    <mat-icon>date_range</mat-icon>\r\n    <span> Saved Search</span>\r\n  </button>\r\n</mat-menu>\r\n\r\n\r\n<mat-menu #addMoreItems=\"matMenu\">\r\n  <button *ngFor=\"let btn of addBtnList\"  mat-menu-item  (click)=\"addBtnClicked(btn.value)\">\r\n      <span> {{ btn.key }} </span>\r\n  </button>\r\n</mat-menu>\r\n","styles":["#kanban-header-form{flex:auto}#kanban-search-grid{display:flex;align-items:center;height:45px}:host ::ng-deep #antera-kanban-header-grid-search{width:325px!important;display:flex}:host ::ng-deep #antera-kanban-header-grid-search figure.mat-figure{background-color:transparent;justify-content:flex-end}:host ::ng-deep #antera-kanban-header-grid-search figure.mat-figure .search-full-width{border-right:1px solid #000;color:#b4b4b4;font-size:12px;min-width:370px}:host ::ng-deep #antera-kanban-header-grid-filter{display:flex;justify-content:flex-end;background-color:#e8e8e8;width:100px!important}:host ::ng-deep #antera-kanban-header-grid-filter .mat-form-field-label-wrapper{top:-8.5px}:host ::ng-deep #antera-kanban-header-grid-filter figure.mat-figure{justify-content:flex-start}:host ::ng-deep #antera-kanban-header-grid-filter figure.mat-figure .search-scope-options{font-size:12px;padding:20px 10px 0;min-width:100px}:host ::ng-deep #antera-kanban-header-grid-search-btn figure.mat-figure{background-color:transparent;justify-content:flex-start}:host ::ng-deep #antera-kanban-header-grid-advanced-search{width:30px!important}:host ::ng-deep #antera-kanban-header-grid-add-btn{margin-left:3px}:host ::ng-deep #antera-kanban-header-grid-add-btn #add-item-btn{background-color:#2e323e;height:45px}.clear-all-btn{color:#2e323e;left:740px!important}.clear-all-btn .clear-all-title{font-size:16px;cursor:pointer}.product-clear-all-btn{color:#2e323e;left:615px!important}.product-clear-all-btn .clear-all-title{font-size:16px;cursor:pointer}.summary-billing-tile,.view-my-item-grid-tile{overflow:visible}:host ::ng-deep .search-full-width .mat-form-field-wrapper{height:45px;min-width:100%;padding-bottom:0}:host ::ng-deep .search-full-width .mat-form-field-wrapper .mat-form-field-flex{background-color:#e8e8e8;border-radius:5px 0 0 5px;height:45px;padding:0;color:#000}:host ::ng-deep .search-full-width .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-prefix{position:absolute;left:10px;top:calc(50% - 12px)}:host ::ng-deep .search-full-width .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-prefix .mat-icon{font-size:24px}:host ::ng-deep .search-full-width .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{left:40px;top:calc(50% - 9px);border:none;padding:0}:host ::ng-deep .search-full-width .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input{font-size:16px;width:90%}:host ::ng-deep .search-full-width .mat-form-field-wrapper .mat-form-field-underline:before{background-color:transparent}:host ::ng-deep .search-full-width.mat-form-field-appearance-fill:not(.mat-form-field-disabled) .mat-form-field-flex:hover~.mat-form-field-underline .mat-form-field-ripple{opacity:0;transform:none;transition:opacity .6s cubic-bezier(.25,.8,.25,1)}:host ::ng-deep .search-full-width.mat-form-field.mat-focused .mat-form-field-ripple{background-color:transparent!important}:host ::ng-deep .search-scope-options .mat-form-field-wrapper{height:45px;padding-bottom:0}:host ::ng-deep .search-scope-options .mat-form-field-wrapper .mat-form-field-flex{background-color:transparent!important;border-radius:0;min-height:45px;padding:0}:host ::ng-deep .search-scope-options .mat-form-field-wrapper .mat-form-field-underline:before{background-color:transparent}:host ::ng-deep .search-scope-options.mat-form-field-appearance-fill:not(.mat-form-field-disabled) .mat-form-field-flex:hover~.mat-form-field-underline .mat-form-field-ripple{opacity:0;transform:none;transition:opacity .6s cubic-bezier(.25,.8,.25,1)}:host ::ng-deep .search-scope-options.mat-form-field.mat-focused .mat-form-field-ripple{background-color:transparent!important}.search-button{background-color:#2d313e;border-radius:0 10px 10px 0!important;color:#fff;height:45px;font-weight:100;width:90px}.header-title{font-size:24px;color:#707070;font-weight:300px}.grid-view-my-item{left:875px!important;width:150px!important}.summary-billing-position,.view-items-position{display:flex;align-items:center;padding-left:15px;font-size:15px}:host ::ng-deep .mat-form-field .calendar-type-container .mat-form-field-flex{width:100%}.position-up{position:relative;top:-5px}.color-warn{color:#8b0000}.module-item{display:block;padding:10px}.mat-toolbar{background:#fff;color:#000;border:1px solid #f4f4f4}.mat-toolbar-row{align-items:center!important}.horizontal-divider{padding-top:10px;border-left:1px solid #000;min-height:100px}::ng-deep .menu-column-label .mat-checkbox-layout{display:inline}.filter-options{min-width:75px;margin-right:5px}.filter-options,.search-option{display:inline-block;position:relative;text-align:left}.search-option{min-width:370px;padding-left:90px}.grid-resync-btn{left:920px!important;width:150px!important}:host ::ng-deep #antera-kanban-header-grid-product-search-btn{margin-left:15px}:host ::ng-deep #antera-kanban-header-grid-product-search-btn #product-search-btn{background-color:#2e323e;height:45px}@media screen and (max-width:1920px){.product-clear-all-btn{left:632px!important}.clear-all-btn{left:720px!important}}@media screen and (min-width:1920px) and (max-width:5000px){.product-clear-all-btn{left:615px!important}.clear-all-btn{left:720px!important}}"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"scopeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"enableViewOptionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"calendarOptionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"calendarTypeList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"selectedCalendar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"cogList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"viewMyItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"summaryBilling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"showSummaryBilling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"reSynceNeeded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"addBtnList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"showClearAllBtn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"calendarOptionsArtworkList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"moduleViewOptionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"defaultProductView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"openAdvancedSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"showKanbanView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"onEnableOptionsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"onCalendarDateClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"onAddBtnClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"onToggleViewMyItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":3}}]}],"onToggleSummaryBilling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":3}}]}],"onCalendarTypeToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":3}}]}],"onSettingListClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"onClearFilterBtnClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"onResetColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"onChangeProductionView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":3}}]}],"onChangeModuleView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":3}}]}],"productSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":3}}]}],"addNewModule":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"onChangeProductView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"defaultModuleView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"ontToggleResyncQBO":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"viewMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":71,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"simpleSearch":[{"__symbolic":"method"}],"openSearch":[{"__symbolic":"method"}],"onClearAllClicked":[{"__symbolic":"method"}],"displayKanbanPage":[{"__symbolic":"method"}],"onEnableViewOptions":[{"__symbolic":"method"}],"onCalendarListClick":[{"__symbolic":"method"}],"addBtnClicked":[{"__symbolic":"method"}],"toggleViewMyItems":[{"__symbolic":"method"}],"toggleSummaryBilling":[{"__symbolic":"method"}],"onCalendarTypeChange":[{"__symbolic":"method"}],"onReorderColumnList":[{"__symbolic":"method"}],"onSettingListChange":[{"__symbolic":"method"}],"onColumnListReorder":[{"__symbolic":"method"}],"changeView":[{"__symbolic":"method"}],"changeProductionView":[{"__symbolic":"method"}],"changeProductView":[{"__symbolic":"method"}],"changeModuleView":[{"__symbolic":"method"}],"advanceProductSearch":[{"__symbolic":"method"}],"addModule":[{"__symbolic":"method"}],"toggleResyncQBO":[{"__symbolic":"method"}]}},"KanbanOrderListViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"antera-software-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\" class=\"select-container\">\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=\"favourite\">\r\n    <th mat-header-cell *matHeaderCellDef class=\"width-60 header-cell\"></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <div (click)=\"onFavoriteClick(element)\">\r\n        <mat-icon *ngIf=\"element?.favorite; else emptyStar\" aria-hidden=\"false\" class=\"pointer favorite\">star\r\n        </mat-icon>\r\n        <ng-template #emptyStar>\r\n          <mat-icon aria-hidden=\"false\" class=\"pointer favorite\">star_border</mat-icon>\r\n        </ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n    <!-- Comment Column -->\r\n    <ng-container matColumnDef=\"comments\">\r\n      <th mat-header-cell class=\"header-cell\"  mat-sort-header *matHeaderCellDef> {{ 'comments' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell (click)=\"onColumnClicked(element, 'comments')\" class=\"comments pointer\" *matCellDef=\"let element\">\r\n          <mat-icon > mode_comment</mat-icon>\r\n           <p class=\"comment-number\" [ngClass]=\"{'comment-position': element?.comments < 10}\"> {{ element?.comments || 0 }} </p>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Sync Status Column -->\r\n    <ng-container matColumnDef=\"syncStatus\">\r\n      <th mat-header-cell class=\"header-cell\" *matHeaderCellDef> {{ 'syncStatus' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"comments pointer\" *matCellDef=\"let element\">\r\n        <button class=\"resync-btn mat-button-toggle-checked\" *ngIf=\"element?.resyncEnabled\" mat-button (click)=\"resyncQBOStatus(element?.id)\" [matTooltip]=\"element.resyncMessage\" [matTooltipClass]=\"'order-row-tooltip'\" [matTooltipPosition]=\"'above'\">\r\n          <mat-icon aria-hidden=\"false\">refresh</mat-icon>\r\n        </button>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Task Column -->\r\n    <ng-container matColumnDef=\"task\">\r\n      <th mat-header-cell class=\"header-cell\"  *matHeaderCellDef> Activity </th>\r\n      <td mat-cell  class=\"pointer\" *matCellDef=\"let element\">\r\n          <span *ngIf=\"element.tasksTotal > 0; else showDash\" fxLayout=\"row\" class=\"padding-left-4\">\r\n                <p class=\"tasks-done\" (click)=\"onColumnClicked(element, 'tasksDone')\"> {{element?.tasksDone }} </p>\r\n                <p *ngIf=\"checkShouldHaveDivider(element)\" class=\"slash\"> / </p>\r\n                <p (click)=\"onColumnClicked(element, 'tasksTotal')\" class=\"tasks-total\">{{element.tasksTotal}}</p>\r\n          </span>\r\n          <ng-template #showDash>\r\n            <p class=\"slash\"> / </p>\r\n          </ng-template>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <!-- Account Column -->\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 (click)=\"onColumnClicked(element, 'accountName')\" class=\"pointer link\" *matCellDef=\"let element\" [matTooltip]=\"element.accountName\" [matTooltipClass]=\"'order-row-tooltip'\" [matTooltipPosition]=\"'above'\"> {{element.accountName}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"invoiceDate\">\r\n    <th mat-header-cell class=\"header-cell\"  mat-sort-header *matHeaderCellDef> {{ 'invoiceDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'invoiceDate')\" *matCellDef=\"let element\" [matTooltip]=\"element.invoiceDate\" [matTooltipClass]=\"'order-row-tooltip'\" [matTooltipPosition]=\"'above'\"> {{ getDateFormat(element.invoiceDate) }} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"actions\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Actions </th>x\r\n    <td mat-cell *matCellDef=\"let element\"></td>\r\n  </ng-container>\r\n\r\n  <!-- Check this  -->\r\n  <ng-container matColumnDef=\"balance\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'balance' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell *matCellDef=\"let element\">   {{element.balance | currency:'USD':'symbol':'1.0-2'}}</td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"billComplete\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'billComplete' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'billComplete')\" *matCellDef=\"let element\"> {{element.billComplete}} </td>\r\n  </ng-container>\r\n\r\n    <!-- Booked Date Column -->\r\n  <ng-container matColumnDef=\"bookedDate\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'bookedDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'bookedDate')\" *matCellDef=\"let element\">\r\n      <p *ngIf=\"element?.bookedDate\">{{ getDateFormat(element.bookedDate) }} </p> </td>\r\n  </ng-container>\r\n\r\n    <!-- Contact Column -->\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 (click)=\"onColumnClicked(element, 'contactName')\" class=\"pointer link\" *matCellDef=\"let element\"> {{element.contactName}} </td>\r\n  </ng-container>\r\n\r\n  <!-- partnerIdentityId  is there instead of corporate as bhavesh..... -->\r\n  <ng-container matColumnDef=\"partnerIdentityName\">\r\n    <th mat-header-cell class=\"header-cell\"  mat-sort-header *matHeaderCellDef> {{ 'partnerIdentityName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'partnerIdentityName')\" *matCellDef=\"let element\"> {{element.partnerIdentityName}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"corporateIdentityName\">\r\n    <th mat-header-cell class=\"header-cell\"  mat-sort-header *matHeaderCellDef> {{ 'partnerIdentityName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'partnerIdentityName')\" *matCellDef=\"let element\"> {{element.partnerIdentityName}} </td>\r\n  </ng-container>\r\n<!-- TODO: WEIRD SCENARIO ABOVE TALK TO BACKEND -->\r\n\r\n  <ng-container matColumnDef=\"creditTerms\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'creditTerms' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'creditTerms')\" *matCellDef=\"let element\"> {{element.creditTerms}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"inHandDateBy\">\r\n    <th mat-header-cell  class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'inHandDateBy' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'inHandDateBy')\" *matCellDef=\"let element\">\r\n      <p *ngIf=\"element.inHandDateBy\">{{ getDateFormat(element.inHandDateBy) }} </p></td>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container matColumnDef=\"customerPo\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'customerPo' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'customerPo')\" *matCellDef=\"let element\"> {{element.customerPo}} </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\"> {{element.csrName}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"csr\">\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\"> {{element.csrName}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"isRushOrder\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'inRushOrder' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'inRushOrder')\" *matCellDef=\"let element\"> {{element.inRushOrder}} </td>\r\n  </ng-container>\r\n\r\n  <!-- Identity Column -->\r\n  <ng-container matColumnDef=\"orderIdentity\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'orderIdentity' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" [matTooltip]=\"element.orderIdentity\" [matTooltipClass]=\"'order-row-tooltip'\" [matTooltipPosition]=\"'above'\" (click)=\"onColumnClicked(element, 'orderIdentity')\" *matCellDef=\"let element\"> {{element.orderIdentity}} </td>\r\n  </ng-container>\r\n\r\n  <!--  Order NO  -->\r\n  <ng-container matColumnDef=\"orderNo\">\r\n\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{page === 'Quotes' ? 'Quote #' : 'Order #'}} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderNo')\" *matCellDef=\"let element\"> {{element.orderNo}} </td>\r\n  </ng-container>\r\n\r\n  <!--  Summary Billing  -->\r\n  <ng-container matColumnDef=\"summaryBillingNumber\">\r\n\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'summaryBillingNumber' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'summaryBillingNumber')\" *matCellDef=\"let element\"> {{element.summaryBillingNumber}} </td>\r\n  </ng-container>\r\n\r\n    <!-- Date Column -->\r\n    <ng-container matColumnDef=\"orderDate\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{page === 'Quotes' ? 'Quote Date' : 'Order Date'}} </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderDate')\" *matCellDef=\"let element\">\r\n        <p *ngIf=\"element.orderDate\">{{ getDateFormat(element.orderDate) }} </p> </td>\r\n    </ng-container>\r\n\r\n    <!-- Payment Status -->\r\n    <ng-container matColumnDef=\"paymentStatus\">\r\n      <th mat-header-cell class=\"header-cell\"  mat-sort-header *matHeaderCellDef> {{ 'paymentStatus' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'paymentStatus')\" class=\"pointer\" *matCellDef=\"let element\">\r\n        <p [ngClass]=\"colors[element.paymentStatus]\"> {{element.paymentStatus}}</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\"> {{element.productionManagerName}} </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"projectName\">\r\n      <th mat-header-cell class=\"header-cell\"  mat-sort-header *matHeaderCellDef> {{ 'projectName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'projectName')\" *matCellDef=\"let element\"> {{element.projectName}} </td>\r\n    </ng-container>\r\n\r\n    <!-- Sales Person -->\r\n    <ng-container matColumnDef=\"salesPerson\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'salesPerson' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'salesPerson')\" *matCellDef=\"let element\"> {{element.salesPerson}} </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"shipDate\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'shipDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'shipDate')\" *matCellDef=\"let element\">\r\n        <p *ngIf=\"element.shipDate\"> {{ getDateFormat(element.shipDate) }} </p> </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"shipVia\">\r\n      <th mat-header-cell class=\"header-cell\"  mat-sort-header *matHeaderCellDef> {{ 'shipVia' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'shipVia')\" *matCellDef=\"let element\"> {{element.shipVia}} </td>\r\n    </ng-container>\r\n\r\n    <!-- Status Column -->\r\n  <ng-container matColumnDef=\"orderStatus\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'orderStatus' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderStatus')\" *matCellDef=\"let element\"> {{element.orderStatus}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"orderAmount\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'orderAmount' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderAmount')\" *matCellDef=\"let element\"> {{element.orderAmount}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"orderNoWithPrefix\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'orderNoWithPrefix' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderNoWithPrefix')\" *matCellDef=\"let element\"> {{element.orderNoWithPrefix}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"alternateAccountNumber\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'alternateAccountNumber' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'alternateAccountNumber')\" *matCellDef=\"let element\"> {{element.alternateAccountNumber}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"altNumber\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'altNumber' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'altNumber')\" *matCellDef=\"let element\">\r\n      {{element.altNumber}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"totalPrice\">\r\n    <th mat-header-cell  *matHeaderCellDef>\r\n      <div class=\"total-header\" >\r\n        <div>{{totalPriceSelectedColumn.key}}</div>\r\n         <div class=\"arrow-down-total-price\" [matMenuTriggerFor]=\"totalPriceMenu\"> </div>\r\n      </div>\r\n     </th>\r\n    <td mat-cell class=\"text-align-right\" *matCellDef=\"let element\">\r\n\r\n      <ng-container [ngSwitch]=\"totalPriceSelectedColumn.value\">\r\n        <ng-container *ngSwitchCase=\"'totalPrice'\"> <p class=\"total-width pointer\" (click)=\"onColumnClicked(element, 'totalPrice')\"> {{element.totalPrice | currency:'USD':'symbol':'1.2-2'}} </p></ng-container>\r\n        <ng-container *ngSwitchCase=\"'balance'\">   <p class=\"total-width pointer\" (click)=\"onColumnClicked(element, 'balance')\"> {{element.balance | currency:'USD':'symbol':'1.2-2'}} </p></ng-container>\r\n        <ng-container *ngSwitchCase=\"'orderAmount'\"> <p class=\"total-width pointer\" (click)=\"onColumnClicked(element, 'orderAmount')\"> {{element.orderAmount | currency:'USD':'symbol':'1.2-2'}} </p></ng-container>\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n\r\n      <!-- Type Column -->\r\n  <ng-container matColumnDef=\"orderType\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'orderType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderType')\" *matCellDef=\"let element\"> {{element.orderType}} </td>\r\n  </ng-container>\r\n\r\n  <!-- Due Date Column -->\r\n  <ng-container matColumnDef=\"dueDate\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'dueDate' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'dueDate')\" *matCellDef=\"let element\">\r\n      <p *ngIf=\"element.dueDate\">{{ getDateFormat(element.dueDate) }} </p> </td>\r\n  </ng-container>\r\n\r\n  <!-- Promo Item Column -->\r\n  <ng-container matColumnDef=\"isPromoItem\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'isPromoItem' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'isPromoItem')\" *matCellDef=\"let element\">\r\n      <p *ngIf=\"element.isPromoItem\">{{ element.isPromoItem }} </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]=\"[10,20, 50, 100]\" [showFirstLastButtons]=\"true\" (page)=\"paginate($event)\"></mat-paginator>\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\r\n<mat-menu #totalPriceMenu=\"matMenu\">\r\n  <button mat-menu-item *ngFor=\"let menuItem of totalColumnDropdownList\" (click)=\"updateTotalPriceSelectedColumn(menuItem)\">\r\n      {{menuItem.key}}\r\n  </button>\r\n</mat-menu>\r\n","styles":["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{text-align:left;max-width:150px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-left:5px}.select-container td.mat-cell{text-align:center!important}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;position:relative;right:20px}:host ::ng-deep .mat-sort-header-arrow{color:#fff}:host ::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}:host ::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}.arrow-down-total-price{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff;position:relative;top:6px;left:4px;cursor:pointer}.resync-btn .mat-icon{position:relative;top:2px}"]}]}],"members":{"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":13,"character":13}]}]}],"listDataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"displayedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"pageSizeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"tableLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"displayActionsBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"onFavoriteToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"onColumnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"onPaginateFire":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"onSortFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":3}}]}],"onResyncQBOStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"appendColumns":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"onFavoriteClick":[{"__symbolic":"method"}],"onColumnClicked":[{"__symbolic":"method"}],"paginate":[{"__symbolic":"method"}],"checkShouldHaveDivider":[{"__symbolic":"method"}],"updateTotalPriceSelectedColumn":[{"__symbolic":"method"}],"onListViewSort":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}],"resyncQBOStatus":[{"__symbolic":"method"}]}},"KanbanSearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"antera-lib-kanban-search","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":11,"character":4},"arguments":["slideInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":12,"character":6},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":13,"character":8},"arguments":[{"transform":"translateX(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":14,"character":8},"arguments":["400ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":14,"character":33},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":16,"character":6},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":17,"character":8},"arguments":["200ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":17,"character":33},"arguments":[{"transform":"translateX(-100%)"}]}]}]]}]]}],"template":"<mat-card *ngIf=\"display\" [@slideInOut] class=\"search-container\">\r\n  <mat-tab-group dynamicHeight [selectedIndex]=\"selectedIndex\">\r\n    <mat-tab label=\"Advanced Search\">\r\n      <ng-template matTabContent class=\"search-container-body\">\r\n        <antera-lib-kanban-search-advanced\r\n        [page]=\"page\"\r\n        [advancedSearchFormData]=\"advancedSearchFormData\"\r\n        [anteraFilterOptions]=\"anteraFilterOptions\"\r\n        [advancedSearchContainerData]=\"advancedSearchContainerData\"\r\n        (advancedSearchSavedValues)=\"emitAdvancedSearchValues($event)\"\r\n        (autoComplete)=\"emitAutoComplete($event)\"\r\n        [showProductDeleted]=\"showProductDeleted\"\r\n        (ontToggleResyncQBO)=\"toggleResyncQBO($event)\"\r\n        [reSynceNeeded]=\"reSynceNeeded\"\r\n        [qboActive]=\"qboActive\"\r\n        [mappingFields]=\"mappingFields\"\r\n        (onToggleAccountType)=\"changeAccType($event)\"\r\n        ></antera-lib-kanban-search-advanced>\r\n      </ng-template>\r\n    </mat-tab>\r\n    <mat-tab label=\"Saved Search\">\r\n      <ng-template matTabContent>\r\n        <div cdkDropList (cdkDropListDropped)=\"onSavedSearchCardOrderChange($event)\">\r\n          <div *ngFor=\"let card of savedSearchList\" class=\"margin-top-8\" >\r\n            <anterasoftware-kanban-search-card cdkDrag [cardDetails]=\"card\" [page]=\"page\" [mappingFields]=\"mappingFields\" (onSharedToggle)=\"onShareToggle($event)\"  (onQuickViewToggle)=\"onSavedSearchEnableQuickView($event)\" (onSelectToggle)=\"onSelectBtnClicked($event)\" (onDeleteCard)=\"onDeleteSavedSearch($event)\" (onHideCard)=\"onHideSavedSearch($event)\"></anterasoftware-kanban-search-card>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</mat-card>\r\n","styles":[".search-container{max-width:400px}.search-container-body{padding-top:750px;margin-top:530px}.margin-top-8{margin-top:8px}"]}]}],"members":{"savedSearchList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"savedSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"advancedSearchFormData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"anteraFilterOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"advancedSearchContainerData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"selectedIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"onCardDeleted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":3}}]}],"onSelectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":3}}]}],"onAdvancedSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":3}}]}],"onSavedSearchQuickViewEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"onSavedSearchShare":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"onSavedSearchReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"onCardHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":3}}]}],"autoCompleteSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":3}}]}],"showProductDeleted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"reSynceNeeded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"ontToggleResyncQBO":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"qboActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"onToggleAccountType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onDeleteSavedSearch":[{"__symbolic":"method"}],"onHideSavedSearch":[{"__symbolic":"method"}],"onSelectBtnClicked":[{"__symbolic":"method"}],"emitAdvancedSearchValues":[{"__symbolic":"method"}],"onSavedSearchEnableQuickView":[{"__symbolic":"method"}],"onSavedSearchCardOrderChange":[{"__symbolic":"method"}],"onShareToggle":[{"__symbolic":"method"}],"emitAutoComplete":[{"__symbolic":"method"}],"toggleResyncQBO":[{"__symbolic":"method"}],"changeAccType":[{"__symbolic":"method"}]}},"KanbanSearchAdvancedComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"antera-lib-kanban-search-advanced","template":"<div id=\"tab-advanced-search\">\r\n  <br>\r\n  <h1>{{ advancedSearchContainerData.titleAdvancedSearch }}</h1>\r\n  <p>{{ advancedSearchContainerData.excerptAdvancedSearch }}</p>\r\n\r\n  <div *ngIf=\"page == 'Contacts'\">\r\n    <mat-radio-group fxLayout=\"row\" fxLayoutGap=\"8px\" (change)=\"changeAccType($event)\">\r\n      <mat-radio-button class=\"mr-40\" value=\"Vendor\"> Vendors </mat-radio-button>\r\n      <mat-radio-button class=\"ml-40\" value=\"Customer\"> Customers </mat-radio-button>\r\n    </mat-radio-group>\r\n  </div>\r\n  <mat-form-field class=\"field-100\" appearance=\"fill\" *ngIf=\"page == 'Products'\">\r\n    <mat-label> Select Product Status </mat-label>\r\n    <mat-select [(ngModel)]=\"showProductDeleted\">\r\n        <mat-option [value]=\"0\" >\r\n          Show Active\r\n        </mat-option>\r\n        <mat-option [value]=\"1\">\r\n          Show Inactive\r\n        </mat-option>\r\n        <mat-option [value]=\"2\">\r\n          Show All\r\n        </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <antera-lib-kanban-search-tag-filter-data #tagForm [anteraFilterOptions]=\"anteraFilterOptions\"></antera-lib-kanban-search-tag-filter-data>\r\n  <antera-lib-kanban-search-advanced-form #filterForm [advancedSearchFormData]=\"advancedSearchFormData\" [page]=\"page\" (inputValueChange)=\"inputValueChange($event)\" (ontToggleResyncQBO)=\"toggleResyncQBO($event)\" [reSynceNeeded]=\"reSynceNeeded\" [qboActive]=\"qboActive\" [mappingFields]=\"mappingFields\"></antera-lib-kanban-search-advanced-form>\r\n</div>\r\n<div class=\"sticky-footer\">\r\n  <button mat-flat-button color=\"primary\" style=\"width: 100%\" (click)=\"saveAdvancedSearch()\">Search</button>\r\n</div>\r\n","styles":[".field-100{width:100%}"]}]}],"members":{"advancedSearchFormData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"anteraFilterOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"advancedSearchContainerData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"advancedSearchSavedValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":3}}]}],"tagForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":3},"arguments":["tagForm"]}]}],"filterForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":34,"character":3},"arguments":["filterForm"]}]}],"autoComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"showProductDeleted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"reSynceNeeded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"ontToggleResyncQBO":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"onToggleAccountType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"qboActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"saveAdvancedSearch":[{"__symbolic":"method"}],"inputValueChange":[{"__symbolic":"method"}],"toggleResyncQBO":[{"__symbolic":"method"}],"changeAccType":[{"__symbolic":"method"}]}},"KanbanSearchAdvancedFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"antera-lib-kanban-search-advanced-form","template":"<h2>{{advancedSearchFormData.title}}</h2>\r\n<p>{{advancedSearchFormData.description}}</p>\r\n\r\n<div  *ngFor=\"let filter of advancedSearchFormData.filters; let i = index;\"  class=\"filter-list\">\r\n\r\n  <ng-container [ngSwitch]=\"filter.type\" >\r\n      <ng-container *ngSwitchCase=\"'select'\" >\r\n        <mat-form-field appearance=\"fill\" *ngIf=\"filter?.multiple\">\r\n          <mat-label> {{ filter.name | orderColumnNameMapper: page :mappingFields }} </mat-label>\r\n        <mat-select [(ngModel)]=\"filter.value\" [disabled]=\"filter?.disabled || false\" multiple>\r\n            <mat-option *ngFor=\"let option of filter?.dropDown\" [value]=\"option\">\r\n              {{option}}\r\n            </mat-option>\r\n        </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"fill\" *ngIf=\"!filter?.multiple\">\r\n          <mat-label> {{ filter.name | orderColumnNameMapper: page : mappingFields }} </mat-label>\r\n        <mat-select [(ngModel)]=\"filter.value\" [disabled]=\"filter?.disabled || false\">\r\n            <mat-option *ngFor=\"let option of filter?.dropDown\" [value]=\"option\">\r\n              {{option}}\r\n            </mat-option>\r\n        </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'dropDownSelect'\" >\r\n        <mat-form-field appearance=\"fill\" *ngIf=\"filter?.multiple\">\r\n          <mat-label> {{ filter.name | orderColumnNameMapper: page :mappingFields }} </mat-label>\r\n        <mat-select [(ngModel)]=\"filter.value\" [disabled]=\"filter?.disabled || false\" multiple>\r\n            <mat-option *ngFor=\"let option of filter?.dropDown\" [value]=\"option.value\">\r\n              {{option.label}}\r\n            </mat-option>\r\n        </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"fill\" *ngIf=\"!filter?.multiple\">\r\n          <mat-label> {{ filter.name | orderColumnNameMapper: page : mappingFields }} </mat-label>\r\n        <mat-select [(ngModel)]=\"filter.value\" [disabled]=\"filter?.disabled || false\">\r\n            <mat-option *ngFor=\"let option of filter?.dropDown\" [value]=\"option.value\">\r\n              {{option.label}}\r\n            </mat-option>\r\n        </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"page == 'Orders' &&  filter.name == 'isRushOrder' && qboActive\">\r\n        <div fxLayout=\"column\" fxLayoutGap=\"12px\">\r\n          <mat-label class=\"radio-title\"> Require Resync? </mat-label>\r\n          <mat-radio-group name=\"reSynceNeeded\" fxLayout=\"row\" fxLayoutGap=\"8px\" (change)=\"toggleResyncQBO($event)\">\r\n            <mat-radio-button value=\"Yes\" name=\"reSynceNeeded\" >Yes</mat-radio-button>\r\n            <mat-radio-button value=\"No\" name=\"reSynceNeeded\" >No</mat-radio-button>\r\n          </mat-radio-group>\r\n          </div>\r\n          <div class=\"margin-top-16\"></div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'radio'\">\r\n        <div fxLayout=\"column\" fxLayoutGap=\"12px\">\r\n        <mat-label class=\"radio-title\"> {{ filter.name | orderColumnNameMapper: page : mappingFields }} </mat-label>\r\n        <mat-radio-group [selected]=\"radioValues[i]\" fxLayout=\"row\" fxLayoutGap=\"8px\" (change)=\"onRadioBtnChange($event, filter)\">\r\n          <mat-radio-button *ngFor=\"let option of filter.radioValues\" [value]=\"option\"> {{option}} </mat-radio-button>\r\n        </mat-radio-group>\r\n        </div>\r\n        <div class=\"margin-top-16\"></div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'calendar'\">\r\n        <mat-form-field appearance=\"fill\">\r\n          <mat-label>{{filter.name | orderColumnNameMapper: page : mappingFields}}</mat-label>\r\n          <input matInput [matDatepicker]=\"picker\" [(ngModel)]=\"filter.value\">\r\n          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n          <mat-datepicker #picker></mat-datepicker>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-container  *ngSwitchCase=\"'autocomplete'\">\r\n       <!--  <mat-form-field>\r\n          <input matInput [matAutocomplete]=\"auto\" type=\"text\" class=\"form-control\" (ngModelChange)=\"change($event,filter)\" [(ngModel)]=\"filter.value\" [ngModelOptions]=\"{standalone: true}\" placeholder=\"{{filter.name | orderColumnNameMapper: page}}\" >\r\n          <mat-autocomplete #auto=\"matAutocomplete\">\r\n            <mat-option *ngFor=\"let option of filter?.dropDown\" [value]=\"option\">\r\n              <span>{{option}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n        </mat-form-field> -->\r\n        <mat-form-field *ngIf=\"filter.name == 'vendorName'\">\r\n          <mat-label> {{filter.name | orderColumnNameMapper: page : mappingFields}} </mat-label>\r\n          <mat-select\r\n                multiple disableRipple \r\n                class=\"form-control\"\r\n                [(ngModel)]=\"filter.value\"\r\n                panelClass=\"vendor-dropDown-select\"\r\n                >\r\n                <mat-option class=\"filter-input\" (click)=\"$event.preventDefault()\" disabled>\r\n                    <input matInput autocomplete=\"off\"\r\n                        (input)=\"change($event.target.value,filter)\"\r\n                        (keydown)=\"$event.stopPropagation()\"\r\n                        placeholder=\"{{filter.name | orderColumnNameMapper: page : mappingFields}}\"/>\r\n                    <!-- <button mat-icon-button (click)=\"clearStoreSearch()\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button> -->\r\n                </mat-option>\r\n                <ng-container *ngFor=\"let option of filter?.dropDown\">\r\n                    <mat-option [value]=\"option\">\r\n                        {{option}}\r\n                    </mat-option>\r\n                </ng-container>\r\n            </mat-select >\r\n          </mat-form-field>\r\n          <mat-form-field *ngIf=\"filter.name != 'vendorName'\">\r\n            <mat-label> {{filter.name | orderColumnNameMapper: page : mappingFields}} </mat-label>\r\n            <mat-select\r\n                  multiple disableRipple \r\n                  class=\"form-control\"\r\n                  [(ngModel)]=\"filter.value\"\r\n                  [panelClass]=\"\"\r\n                  >\r\n                  <mat-option class=\"filter-input\" (click)=\"$event.preventDefault()\" disabled>\r\n                      <input matInput autocomplete=\"off\"\r\n                          (input)=\"change($event.target.value,filter)\"\r\n                          (keydown)=\"$event.stopPropagation()\"\r\n                          placeholder=\"{{filter.name | orderColumnNameMapper: page : mappingFields}}\"/>\r\n                      <!-- <button mat-icon-button (click)=\"clearStoreSearch()\">\r\n                          <mat-icon>close</mat-icon>\r\n                      </button> -->\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let option of filter?.dropDown\">\r\n                      <mat-option [value]=\"option\">\r\n                          {{option}}\r\n                      </mat-option>\r\n                  </ng-container>\r\n              </mat-select >\r\n            </mat-form-field>\r\n    </ng-container>\r\n\r\n      <ng-container *ngSwitchDefault>\r\n        <mat-form-field appearance=\"fill\"  class=\"full-width\">\r\n          <mat-label>{{filter.name | orderColumnNameMapper: page : mappingFields}}</mat-label>\r\n        <input matInput [(ngModel)]=\"filter.value\">\r\n        <mat-hint *ngIf=\"filter?.hint?.length > 0\">ie: \"{{filter.hint}}\"</mat-hint>\r\n      </mat-form-field>\r\n    </ng-container>\r\n    \r\n    </ng-container>\r\n</div>\r\n\r\n\r\n\r\n","styles":[".full-width{min-width:100%}.display-none{display:none}.margin-top-16{margin-top:16px}.radio-title{font-size:18px}:host ::ng-deep .filter-list .mat-form-field{width:100%}.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}.resync-title{font-size:18px}"]}]}],"members":{"advancedSearchFormData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"reSynceNeeded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"inputValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"ontToggleResyncQBO":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"qboActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onRadioBtnChange":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"toggleResyncQBO":[{"__symbolic":"method"}]}},"KanbanSearchContainerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"antera-lib-kanban-search-container","template":"<mat-drawer-container class=\"example-container\">\r\n    <mat-drawer #drawer >\r\n        <antera-lib-kanban-search [display]=true></antera-lib-kanban-search>\r\n    </mat-drawer>\r\n    <mat-drawer-content class=\"full-height\">\r\n      <button mat-raised-button (click)=\"drawer.toggle()\">Toggle drawer</button>\r\n    </mat-drawer-content>\r\n  </mat-drawer-container>\r\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"KanbanSearchSavedComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"antera-lib-kanban-search-saved","template":"<p>kanban-search-saved works!</p>\r\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"TagFilterData":{"__symbolic":"interface"},"KanbanSearchTagFilterDataComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"antera-lib-kanban-search-tag-filter-data","template":"<h2>{{tagFilterData.title}}</h2>\r\n<p>{{tagFilterData.excerpt}}</p>\r\n<!-- <form formGroup=\"anteraFilterForm\">\r\n<mat-form-field id=\"advanced-tag-filter\" appearance=\"fill\">\r\n    <mat-label>Find A Tag</mat-label>\r\n\r\n    <mat-select [formControl]=\"anteraFilterForm\" multiple>\r\n\r\n        <mat-select-trigger>\r\n\r\n            {{anteraFilterForm.value ? anteraFilterForm.value[0] : ''}}\r\n\r\n            <span *ngIf=\"anteraFilterForm.value?.length > 1\" class=\"\">\r\n\r\n                (+{{anteraFilterForm.value.length - 1}} {{anteraFilterForm.value?.length === 2 ? 'other' : 'others'}})\r\n\r\n            </span>\r\n\r\n        </mat-select-trigger>\r\n\r\n        <mat-option *ngFor=\"let option of anteraFilterOptions\" [value]=\"option\">{{option}}</mat-option>\r\n    </mat-select>\r\n</mat-form-field>\r\n</form> -->\r\n\r\n<!-- anteraFilterOptions {{anteraFilterOptions | json}} -->\r\n\r\n<!-- <div [formGroup]=\"myGroup\">\r\n    <div formGroupName=\"person\">\r\n       <input formControlName=\"firstName\">\r\n    </div>\r\n </div> -->\r\n\r\n <!-- <mat-form-field appearance=\"fill\">\r\n    <mat-label>Change label</mat-label>\r\n    <mat-select [formControl]=\"anteraFilterForm\" multiple> -->\r\n      <!-- <mat-option *ngFor=\"let option of anteraFilterOptions\" [value]=\"option\">{{option}}</mat-option> -->\r\n      <!-- <mat-option *ngFor=\"let option of anteraFilterOptions\">{{option}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field> -->\r\n\r\n  <!-- <mat-label>Find A Tag</mat-label> -->\r\n  <h2>Tags</h2>\r\n  <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n    <mat-label>Find A Tag</mat-label>\r\n    <mat-select [formControl]=\"anteraFilterForm\" multiple>\r\n      <mat-option *ngFor=\"let option of anteraFilterOptions\" [value]=\"option.key\">{{option.key}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n","styles":[".full-width{min-width:100%}"]}]}],"members":{"tagFilterData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"anteraFilterOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"filterByTag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"KanbanViewCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-kanban-view-card","template":"<mat-card>\r\n    <div class=\"top-bar\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">\r\n        <!-- <mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox> -->\r\n        <span class=\"top-container\">\r\n            Due Date: {{ getDateFormat(cardDetails.dueDate) }}\r\n        </span>\r\n    </div>\r\n\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\r\n        <div fxLayout=\"row\" class=\"art-header\">\r\n            <div fxLayout=\"column\" class=\"header-container\">\r\n                <span><mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>{{ cardDetails.name }}</span>\r\n                <h4 class=\"art-title\">  </h4>\r\n                <!-- <p class=\"due-date\"> Due: {{ getDateFormat(cardDetails.dueDate, true, false, true) }} </p> -->\r\n            </div>\r\n        </div>\r\n        <div>\r\n            \r\n            <mat-icon  [matMenuTriggerFor]=\"openCardMenu\" aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n            <mat-menu #openCardMenu=\"matMenu\">\r\n                <button mat-menu-item (click)=\"assignArtwork(cardDetails)\">\r\n                    <span>Assign Artwork</span>\r\n                </button>\r\n                <button mat-menu-item (click)=\"deleteArtwork(cardDetails)\">\r\n                    <span>Delete</span>\r\n                </button>\r\n                <button mat-menu-item (click)=\"editArtwork(cardDetails)\">\r\n                    <span>Edit</span>\r\n                </button>\r\n            </mat-menu>\r\n            <span class=\"mt-8\"><a aria-label=\"pin\" (click)=\"onPin($event)\"><mat-icon *ngIf=\"cardDetails.pinned\">star</mat-icon><mat-icon *ngIf=\"!cardDetails.pinned\">star_border</mat-icon></a></span>\r\n        </div>\r\n    </div>\r\n    <mat-card-content>\r\n        <img (click)=\"editArtwork(cardDetails)\" width=\"240\" height=\"300\" class=\"img-flex\" [src]=\"cardDetails?.bigImg\"  [default]= \"'images/product-image-placeholder.png'\">\r\n    </mat-card-content>\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-around\" class=\"status-container\">\r\n        <div class=\"status-inline\">\r\n            <p class=\"bold\"> Status: </p>\r\n            <p> {{cardDetails.status }} </p>\r\n        </div>\r\n        <div class=\"status-inline\">\r\n            <p class=\"bold\"> Priority</p>\r\n            <p> {{ cardDetails.priority }} </p>\r\n        </div>\r\n        <div class=\"status-inline\">\r\n            <p class=\"bold\"> Order#</p>\r\n            <p *ngIf=\"orderNumbers != ''\"> <a class=\"accent-900-fg\" [matTooltip]=\"orderNumbers\"  [matTooltipPosition]=\"'above'\"\r\n                [matTooltipClass]=\"'order-row-tooltip'\"\r\n                (click)=\"openRelatedOrderDetailDialog(cardDetails.orderNumber[0]?.orderId, cardDetails)\">\r\n                {{cardDetails.orderNumber[0]?.orderNum}}</a></p>\r\n            <p *ngIf=\"orderNumbers == ''\"> <a mat-button class=\"accent-900-fg\"\r\n                (click)=\"openRelatedOrderDetailDialog(cardDetails.orderNumber[0]?.orderId, cardDetails)\">\r\n                {{cardDetails.orderNumber[0]?.orderNum}}</a></p>\r\n        </div>\r\n        <div class=\"status-inline\">\r\n            <p class=\"bold\"> Work Order #</p>\r\n            <p> <a class=\"link\" [routerLink]=\"['/productions/', cardDetails.workOrderId]\">{{ cardDetails.workOrderNo }} </a></p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"footer-container\">\r\n        <p class=\"bold\"> Tags </p>\r\n        <p *ngFor=\"let tag of cardDetails.tagList\" class=\"tag\"> {{ tag }} </p>\r\n    </div>\r\n</mat-card>\r\n","styles":[".top-bar{display:flex;flex-direction:row;top:0;left:0;margin-bottom:5px;background-color:red;text-align:center;padding:5px 0;font-size:12px;font-weight:400}.top-bar,.top-bar .top-container{width:100%}.top-bar .checkbox-position{position:relative;bottom:5px}.tag{display:inline;font-size:10px;color:#008fcc}.img-flex{width:100%;height:100px;-o-object-fit:contain;object-fit:contain;cursor:pointer}.mat-card{border-radius:0!important;padding:0}.bold{font-weight:700}p{font-size:10px;margin:0}.status-inline{flex-direction:column;text-align:center;width:1 fr}.footer-container{padding:12px}.status-container{background-color:#f7f7f7;margin-left:-16px;margin-right:-16px;padding:12px}.due-date{font-family:Helvetica Neue;font-size:11px;color:#aaa;margin-top:-18px;margin-left:2px}.header-container{padding-left:5px}.art-title{margin-top:0;font-size:14px;margin-bottom:10px}.art-image{max-width:100%;max-height:100%}.art-header{margin-bottom:10px}.art-header .mat-checkbox{display:inline;float:left;padding:0 2px}"]}]}],"members":{"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"onAssignArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"onDeleteArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"onEditArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"pinned":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"onOpenRelatedOrderDetailDialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"assignArtwork":[{"__symbolic":"method"}],"deleteArtwork":[{"__symbolic":"method"}],"editArtwork":[{"__symbolic":"method"}],"onPin":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}],"openRelatedOrderDetailDialog":[{"__symbolic":"method"}]}},"KanbanViewContainerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"anterasoftware-kanban-view-container","template":"<div cdkDropListGroup>\r\n    <div\r\n    class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\"> \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n          <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n              <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n            <div fxLayout=\"column\" class=\"total-position\" *ngIf=\"swimLane?.header?.title === 'New' || swimLane?.header?.title === 'Assigned'\">\r\n              <p>{{swimLane?.cards?.length}}/{{swimLane?.header?.total | number: '1.2-2'}}<br>\r\n              </p>\r\n          </div>\r\n        </div>\r\n        \r\n        <button class=\"action-btn\" mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n          <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n              <span>Edit Lane</span>\r\n          </button>\r\n          <button  *ngIf=\"swimLane?.header?.title !== 'Pending' && swimLane?.header?.title !== 'Done'\" mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n              <span>Delete Lane</span>\r\n          </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n            <anterasoftware-kanban-view-card [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\" [cardDetails]=\"card\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\"  (onAssignArtwork)=\"onAssignArtwork(card)\" (onDeleteArtwork)=\"onDeleteArtwork(card)\" (onEditArtwork)=\"onEditArtwork(card)\" (pinned)=\"pinned(card)\" (onOpenRelatedOrderDetailDialog)=\"openRelatedOrderDetailDialog($event)\" ></anterasoftware-kanban-view-card>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n    \r\n  </div>\r\n","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px;width:100%}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container header .title-container .total-position{flex:auto;font-weight:550;color:#0277bd!important}.antera-swimlane-container header .title-container .total-position p{text-align:right}.antera-swimlane-container header .action-btn{min-width:auto!important;padding:0!important}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 236px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"assignArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"deleteArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"editArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"onDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"onPin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"onOpenRelatedOrderDetailDialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":29,"character":30}]}],"openSwimLaneDialog":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"onAssignArtwork":[{"__symbolic":"method"}],"onDeleteArtwork":[{"__symbolic":"method"}],"onEditArtwork":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"pinned":[{"__symbolic":"method"}],"openRelatedOrderDetailDialog":[{"__symbolic":"method"}]}},"KanbanAddSavedSearchModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"anterasoftware-kanban-add-saved-search-modal","template":"<div class=\"dialog-content-wrapper\">\r\n  <mat-toolbar matDialogTitle class=\"mat-accent m-0\">\r\n      <mat-toolbar-row>\r\n          <div><h2 *ngIf=\"editFlag; else newTitle\" class=\"swimlane-header\"> Edit Swimlane </h2>\r\n              <ng-template #newTitle>\r\n                  <h2 class=\"swimlane-header\">Add Saved Search</h2>\r\n              </ng-template></div>\r\n      </mat-toolbar-row>\r\n  </mat-toolbar>\r\n\r\n  <mat-dialog-content class=\"p-24 m-0\">\r\n\r\n\r\n    <form fxLayout=\"column\" class=\"saved-search-whole-container\" fxLayoutAlign=\"space-between\">\r\n      <mat-form-field>\r\n          <mat-label> Name </mat-label>\r\n          <input [formControl]=\"savedSearchName\" matInput placeholder=\"Name\" />\r\n      </mat-form-field>\r\n      <div fxLayout=\"row\" fxLayoutGap=\"6px\" class=\"checkbox-container\">\r\n        <mat-checkbox [formControl]=\"isTab\"> Quick Search </mat-checkbox>\r\n        <mat-checkbox [formControl]=\"isShare\" class=\"ml-24\"> Share </mat-checkbox>\r\n      </div>\r\n      <!-- <div fxLayout=\"column\" fxLayoutGap=\"4px\">\r\n          <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn\" > Save </button>\r\n          <button mat-button (click)=\"onClose()\" class=\"cancel-btn\"> Cancel </button>\r\n      </div> -->\r\n    </form>\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions class=\"m-0 p-16\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn mat-raised-button mat-accent\" > Save </button>\r\n          <button mat-button (click)=\"onClose()\" class=\"cancel-btn mat-raised-button mat-accent\"> Cancel </button>\r\n      </div>\r\n\r\n  </mat-dialog-actions>\r\n</div>\r\n\r\n<!-- <form fxLayout=\"column\" class=\"saved-search-whole-container\" fxLayoutAlign=\"space-between\">\r\n  <div class=\"header-container\">\r\n      <h2 class=\"saved-search-header\"> Add Saved Search  </h2>\r\n\r\n      <hr class=\"horizontal-line\">\r\n  </div>\r\n  <mat-form-field>\r\n      <mat-label> Name </mat-label>\r\n      <input [formControl]=\"savedSearchName\" matInput placeholder=\"Name\" />\r\n  </mat-form-field>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"6px\" class=\"checkbox-container\">\r\n    <mat-checkbox [formControl]=\"isTab\"> Quick Search </mat-checkbox>\r\n    <mat-checkbox [formControl]=\"isShare\" class=\"ml-24\"> Share </mat-checkbox>\r\n  </div>\r\n  <div fxLayout=\"column\" fxLayoutGap=\"4px\">\r\n      <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn\" > Save </button>\r\n      <button mat-button (click)=\"onClose()\" class=\"cancel-btn\"> Cancel </button>\r\n  </div>\r\n</form> -->\r\n","styles":[".saved-search-whole-container{height:100%}.saved-search-whole-container .header-container .horizontal-line{margin-left:-33px;margin-right:-23px}.saved-search-whole-container .save-btn{background-color:#332323;color:#fff;border:1px #707070}.saved-search-whole-container .cancel-btn{color:#1c7db9}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"KanbanAddSavedSearchModalComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}],"onSave":[{"__symbolic":"method"}]}},"KanbanSearchCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"anterasoftware-kanban-search-card","template":"<div fxLayout=\"row\" class=\"box-container mat-elevation-z2\">\r\n  <div class=\"select-container\">\r\n      <div fxLayout=\"row\" class=\"drag-container\">\r\n        <mat-icon cdkDragHandle >drag_indicator</mat-icon>\r\n        <p class=\"select-title\" (click)=\"onSelectEmitted()\">Select </p>\r\n      </div>\r\n  </div>\r\n  <div fxLayout=\"column\" class=\"content-container\" fxLayoutAlign=\"space-between\">\r\n    <div style=\"padding-left: 13px;\">\r\n    <h3 *ngIf=\"cardDetails?.title\"> \"{{ cardDetails.title }}\" </h3>\r\n    <span class=\"filter-list-content\" >\r\n      <p *ngFor=\"let card of cardDetails.filterList; let i = index\"> {{ card.filterName | orderColumnNameMapper: page : mappingFields}} : {{ card.filterValue }} <span *ngIf=\"i !==cardDetails?.filterList.length-1\">, </span>  </p>\r\n    </span>\r\n    </div>\r\n    <div fxLayout=\"row\" class=\"footer-container\" fxLayoutAlign=\"space-between\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"6px\" class=\"checkbox-container\">\r\n        <mat-checkbox  (change)=\"onEnableQuickSearch($event)\" [checked]=\"cardDetails.isTab\"> Quick Search </mat-checkbox>\r\n        <mat-checkbox  (change)=\"onEnableShare($event)\" [checked]=\"cardDetails.isShared\"> Share </mat-checkbox>\r\n      </div>\r\n      <p *ngIf=\"!cardDetails.isHide\" (click)=\"onDeleteSearchCard()\" class=\"delete-btn\" > Delete</p>\r\n      <p *ngIf=\"cardDetails.isHide\" (click)=\"onHideSearchCard()\" class=\"delete-btn\" > Hide</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n","styles":[".box-container{height:100px;width:100%;position:relative;color:#4d5d66;border:2px solid #ddd}.box-container .select-container{width:35%;position:relative;color:#fff;background-color:#2d313e}.box-container .select-container .drag-container{position:relative;top:35px}.box-container .select-container .drag-container .select-title{position:relative;top:3px;cursor:pointer}.box-container .content-container{width:65%;border-left:2px solid #2d313e;height:100%;padding-left:10px;padding-top:5px}.box-container .content-container .filter-list-content{width:95%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-flex}.box-container .content-container .footer-container{width:97%;margin:0 auto;border-top:1px solid #aaa}.box-container .content-container .footer-container .delete-btn{color:#8b0000;border-top:2px;cursor:pointer;font-size:11px;padding-top:2px}p{margin:0}h3{margin:0 0 3px}:host ::ng-deep .footer-container .checkbox-container .mat-checkbox-inner-container{width:14px!important;height:14px!important}:host ::ng-deep .footer-container .checkbox-container .mat-checkbox-label{font-size:10px!important}"]}]}],"members":{"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"onDeleteCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"onSelectToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"onQuickViewToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"onSharedToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"onHideCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onDeleteSearchCard":[{"__symbolic":"method"}],"onHideSearchCard":[{"__symbolic":"method"}],"onSelectEmitted":[{"__symbolic":"method"}],"onEnableQuickSearch":[{"__symbolic":"method"}],"onEnableShare":[{"__symbolic":"method"}]}},"KanbanConfirmationModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"anterasoftware-kanban-confirmation-modal","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":17},"member":"None"},"template":"<!-- <div fxLayout=\"column\" fxLayoutAlign=\"space-between\" class=\"modal-container\">\r\n  <div class=\"header-container\">\r\n    <h4 class=\"{{ titleCss }}  header\">{{ title }}</h4>\r\n  </div>\r\n  <div class=\"content-container\">\r\n    <p class=\"{{messageCss}}\">{{ message }}</p>\r\n  </div>\r\n  <div fxLayout=\"column\" fxLayoutGap=\"2px\">\r\n    <button mat-button class=\"{{ submitBtnCss }} submit-btn\" (click)=\"submitClicked()\">\r\n      {{ submitBtn }}\r\n    </button>\r\n    <button mat-button class=\"cancelBtn {{ cancelBtnCss }}\" (click)=\"close()\">\r\n      {{ cancelBtn }}\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n<h1 matDialogTitle>{{ title }}</h1>\r\n<div mat-dialog-content>\r\n    <span [innerHTML]='message'>\r\n    </span>\r\n    <!-- <span><br><br>{{confirmNote}}</span> -->\r\n</div>\r\n<div mat-dialog-actions class=\"pt-24\">\r\n    <button mat-raised-button class=\"mat-accent mr-16\" (click)=\"submitClicked()\">{{ submitBtn }}</button>\r\n    <button mat-button (click)=\"close()\">{{ cancelBtn }}</button>\r\n</div>\r\n","styles":[".modal-container{height:100%}.modal-container .header-container{padding-left:10px;min-height:40px;margin-left:-24px;margin-right:-24px}.modal-container .header-container .header{color:#0a6082;font-family:Roboto;font-size:20px}.modal-container .content-container{padding-top:15px;height:100%}.modal-container .cancel-btn{color:#1c7db9}.modal-container .submit-btn{background-color:#332323;color:#fff;border:1px #707070}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":13,"character":81},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":13,"character":88}]}]],"parameters":[{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"KanbanConfirmationModalComponent"}]},{"__symbolic":"reference","name":"any"}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"submitBtn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"cancelBtn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"titleCss":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"messageCss":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"submitBtnCss":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"cancelBtnCss":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"setPageValues":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"submitClicked":[{"__symbolic":"method"}]}},"KanbanProductsListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"anterasoftware-kanban-products-list","template":"<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onListViewSort($event)\" class=\"mat-elevation-z8\"  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\r\n  <ng-container matColumnDef=\"productId\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productId' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productId')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productId\"><p class=\"text-truncate\"> {{element?.productId}} </p></td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"image\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  </th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <!-- <img *ngIf=\"element.MediaContent[0]\"\r\n           class=\"product-image-wide\"\r\n           alt=\"{{element.productName}}\"\r\n           src=\"{{element.MediaContent[0].url}}\"\r\n           *ngIf=\"element.MediaContent && element.MediaContent[0] && element.MediaContent[0].url\" src=\"processImageFromImaginary(element.MediaContent[0].url)\"\r\n      /> -->\r\n      <img class=\"product-image-wide\"\r\n           alt=\"{{element.productName}}\"\r\n           *ngIf=\"element.MediaContent && element.MediaContent[0] && element.MediaContent[0].url\" [src]=\"processImageFromImaginary(element.MediaContent[0].url)\"\r\n      />\r\n    </td>\r\n\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"productName\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productName\"><p class=\"text-truncate\"> {{element?.productName}} </p></td>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container matColumnDef=\"inhouseId\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'inhouseId' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'inhouseId')\" *matCellDef=\"let element\" [matTooltip]=\"element?.inhouseId\"><p class=\"text-truncate\"> {{element?.inhouseId}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"productType\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productTypeName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productTypeName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productTypeName\"><p class=\"text-truncate\"> {{element?.productTypeName}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"storeNames\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'storeNames' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'storeNames')\" *matCellDef=\"let element\" [matTooltip]=\"element?.storeNames\">\r\n      <div>\r\n        <p *ngIf=\"element?.StoreArray.length == 0\" class=\"text-truncate\">None</p>\r\n        <mat-chip-list *ngIf=\"element?.StoreArray.length == 1\">\r\n            <mat-chip>{{element?.StoreArray[0].store}}</mat-chip>\r\n        </mat-chip-list>\r\n        <mat-chip-list *ngIf=\"element?.StoreArray.length > 1\">\r\n            <mat-chip *ngFor=\"let store of element?.StoreArray\" matTooltip=\"{{store.store}}\">{{store.store | slice:0:1}}</mat-chip>\r\n        </mat-chip-list>\r\n    </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"vendorName\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'vendorName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'vendorName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.vendorName\"><p class=\"text-truncate\"> {{element?.vendorName}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"categoryName\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'categoryName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'categoryName')\" *matCellDef=\"let element\"><!-- <p class=\"text-truncate\"> {{element?.categoryName}} </p> -->\r\n      <div>\r\n        <p *ngIf=\"element?.ProductCategoryArray.length == 0\" class=\"text-truncate\">None</p>\r\n        <mat-chip-list *ngIf=\"element?.ProductCategoryArray.length == 1\">\r\n            <mat-chip>{{element?.ProductCategoryArray[0]}}</mat-chip>\r\n        </mat-chip-list>\r\n        <mat-chip-list *ngIf=\"element?.ProductCategoryArray.length > 1\">\r\n            <mat-chip *ngFor=\"let category of element?.ProductCategoryArray\" matTooltip=\"{{category}}\">{{category | slice:0:1}}</mat-chip>\r\n        </mat-chip-list>\r\n    </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"expirationDate\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'expirationDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'expirationDate')\" *matCellDef=\"let element\" [matTooltip]=\"element?.expirationDate\"><p class=\"text-truncate\"> {{ getDateFormat(element?.expirationDate) }} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"source\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  {{ 'source' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'source')\" *matCellDef=\"let element\" [matTooltip]=\"element?.source\"><p class=\"text-truncate\"> {{element?.source}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"sourceProductSku\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  {{ 'sourceProductSku' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'sourceProductSku')\" *matCellDef=\"let element\" [matTooltip]=\"element?.sourceProductSku\"><p class=\"text-truncate\"> {{element?.sourceProductSku}} </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=\"catalogYear\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'catalogYear' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'catalogYear')\" *matCellDef=\"let element\" [matTooltip]=\"element?.catalogYear\"><p class=\"text-truncate\"> {{element?.catalogYear}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"poType\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'poType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'poType')\" *matCellDef=\"let element\" [matTooltip]=\"element?.poType\"><p class=\"text-truncate\"> {{element?.poType}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"specialPrice\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'specialPrice' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'specialPrice')\" *matCellDef=\"let element\" [matTooltip]=\"element?.specialPrice\"><p class=\"text-truncate\"> {{element?.specialPrice}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"productChannel\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productChannel' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productChannel')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productChannel\"><p class=\"text-truncate\"> {{element?.productChannel}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"prodStatus\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'prodStatus' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'prodStatus')\" *matCellDef=\"let element\" [matTooltip]=\"element?.prodStatus\"><p class=\"text-truncate\"> {{element?.prodStatus}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"prodKind\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'prodKind' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'prodKind')\" *matCellDef=\"let element\" [matTooltip]=\"element?.prodKind\"><p class=\"text-truncate\"> {{element?.prodKind}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"msrp\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'msrp' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'msrp')\" *matCellDef=\"let element\" [matTooltip]=\"element?.msrp\"><p class=\"text-truncate\"> {{element?.msrp}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"calculatorType\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'calculatorType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'calculatorType')\" *matCellDef=\"let element\" [matTooltip]=\"element?.calculatorType\"><p class=\"text-truncate\"> {{element?.calculatorType}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"customerName\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'customerName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'customerName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.customerName\"><p class=\"text-truncate\"> {{element?.customerName}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"countryOrigin\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'countryOrigin' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'countryOrigin')\" *matCellDef=\"let element\" [matTooltip]=\"element?.countryOrigin\"><p class=\"text-truncate\"> {{element?.countryOrigin}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"assignedUserName\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'assignedUserName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'assignedUserName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.assignedUserName\"><p class=\"text-truncate\"> {{element?.assignedUserName}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"productOrderType\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productOrderType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productOrderType')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productOrderType\"><p class=\"text-truncate\"> {{element?.productOrderType}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"manufacturerName\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'manufacturerName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'manufacturerName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.manufacturerName\"><p class=\"text-truncate\"> {{element?.manufacturerName}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"autoPullEvents\">\r\n    <th mat-header-cell class=\"header-cell\" *matHeaderCellDef> {{ 'autoPullEvents' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'autoPullEvents')\" *matCellDef=\"let element\">\r\n      <div>\r\n        <p *ngIf=\"element?.SystemEventArray.length == 0\" class=\"text-truncate\">None</p>\r\n        <mat-chip-list *ngIf=\"element?.SystemEventArray.length == 1\">\r\n            <mat-chip>{{element?.SystemEventArray[0]}}</mat-chip>\r\n        </mat-chip-list>\r\n        <mat-chip-list *ngIf=\"element?.SystemEventArray.length > 1\">\r\n            <mat-chip *ngFor=\"let systemEvent of element?.SystemEventArray\" matTooltip=\"{{systemEvent}}\">{{systemEvent}}</mat-chip>\r\n        </mat-chip-list>\r\n    </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"productionTime\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productionTime' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productionTime')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productionTime\"><p class=\"text-truncate\"> {{element?.productionTime}} </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]=\"[10,20, 50, 100]\" [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":["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{text-align:left;max-width:150px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-left:5px}.select-container td.mat-cell{text-align:center!important}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;position:relative;right:20px}:host ::ng-deep .mat-sort-header-arrow{color:#fff}:host ::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}:host ::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}.arrow-down-total-price{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff;position:relative;top:6px;left:4px;cursor:pointer}.product-image-wide{height:auto;max-height:40px!important;max-width:40px!important;margin-right:15px}"]}]}],"members":{"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":17,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":17,"character":13}]}]}],"listDataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"displayedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"pageSizeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"tableLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"displayActionsBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":3}}]}],"onFavoriteToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"onColumnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":3}}]}],"onPaginateFire":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"onSortFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"paginate":[{"__symbolic":"method"}],"onColumnClicked":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"onListViewSort":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}],"processImageFromImaginary":[{"__symbolic":"method"}]}},"KeyValueI":{"__symbolic":"interface"},"KeyValue":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"number"}]}]}},"Filters":{"__symbolic":"interface"},"AdvancedSearchFormData":{"__symbolic":"interface"},"AdvancedSearchContainerData":{"__symbolic":"class","members":{}},"ActionI":{"__symbolic":"interface"},"Action":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"OrderListMapperI":{"__symbolic":"interface"},"OrderTableColumNameMapper":[{"key":"inHandDateBy","value":"In Hands Date"},{"key":"orderAmount","value":"Order Amount"},{"key":"All","value":"* All *"},{"key":"orderNo","value":"Order #"},{"key":"summaryBillingNumber","value":"Summary Billing #"},{"key":"orderIdentity","value":"Order Identity"},{"key":"contactName","value":"Contact"},{"key":"salesPerson","value":"Sales Rep"},{"key":"accountName","value":"Account"},{"key":"orderType","value":"Order Type"},{"key":"orderDate","value":"Order Date"},{"key":"bookedDate","value":"Booked Date"},{"key":"orderStatus","value":"Order Status"},{"key":"paymentStatus","value":"Payment"},{"key":"totalPrice","value":"Total"},{"key":"balance","value":"Balance"},{"key":"actions","value":"Actions"},{"key":"corporateIdentityName","value":"Corporate Identity"},{"key":"partnerIdentityId","value":"Corporate Identity"},{"key":"projectName","value":"Project Name"},{"key":"customerPo","value":"Customer Po"},{"key":"csrName","value":"CSR Name"},{"key":"csr","value":"CSR Name"},{"key":"creditTerms","value":"Credit Terms"},{"key":"productionManagerName","value":"Prod. Manager"},{"key":"shipVia","value":"Ship Via"},{"key":"billComplete","value":"Bill Complete"},{"key":"isRushOrder","value":"Is Rush Order"},{"key":"shipDate","value":"Ship Date (Customer)"},{"key":"shipDateFrom","value":"Ship Date From (Customer)"},{"key":"shipDateTo","value":"Ship Date To (Customer)"},{"key":"inHandDateByTo","value":"In Hands Date To (Customer)"},{"key":"inHandDateByFrom","value":"In Hands Date From (Customer)"},{"key":"bookedDateFrom","value":"Booked Date From"},{"key":"bookedDateTo","value":"Booked Date To"},{"key":"orderDateTo","value":"Order Date To"},{"key":"orderDateFrom","value":"Order Date From"},{"key":"partnerIdentityName","value":"Corp. Identity"},{"key":"tagId","value":"Tag"},{"key":"tag","value":"Tag"},{"key":"inRushOrder","value":"Is Rush Order"},{"key":"favourite","value":"Favorite"},{"key":"comments","value":"Comments"},{"key":"task","value":"Activities"},{"key":"invoiceDate","value":"Invoice Date"},{"key":"invoiceDateFrom","value":"Invoice Date From"},{"key":"invoiceDateTo","value":"Invoice Date To"},{"key":"dueDate","value":"Due Date "},{"key":"salesPersonId","value":"Sales Person Id"},{"key":"attentionTo","value":"Attention To"},{"key":"factoryShipDate","value":"Factory Ship Date"},{"key":"notePackagingSlip","value":"Note Packaging Slip"},{"key":"factoryShipDate","value":"Factory Ship Date"},{"key":"commissionGroupId","value":"Commission Group Id"},{"key":"expectedPrintDate","value":"Expected Print Date"},{"key":"supplierShipDate","value":"Supplier Ship Date"},{"key":"commissionGroupId","value":"CommissionGroupId"},{"key":"expectedPrintDate","value":"Expected Print Date"},{"key":"supplierShipDate","value":"Supplier Ship Date"},{"key":"supplierInHandsDate","value":"Supplier In Hands Date"},{"key":"csrEmbroideryUserId","value":"CSR Embroidery User Id"},{"key":"csrScreenprintUserId","value":"Csr Screen Print User Id"},{"key":"productionManagerId","value":"Production Manager Id"},{"key":"proofDueDate","value":"Proof Due Date"},{"key":"shippingAccountNo","value":"Shipping Account #"},{"key":"proformaDate","value":"Pre Invoice Date"},{"key":"salesManagerId","value":"Sales Manager Id"},{"key":"orderNoWithPrefix","value":"Order No Prefix"},{"key":"alternateAccountNumber","value":"Alternate Account #"},{"key":"altNumber","value":"Alt Number"},{"key":"syncStatus","value":"Sync Status"},{"key":"dueDate","value":"Due Date"},{"key":"dueDateFrom","value":"Due Date From"},{"key":"dueDateTo","value":"Due Date To"},{"key":"isPromoItem","value":"Promo Item"},{"key":"kanbanStatus","value":"Kanban Status"}],"QuotesTableColumNameMapper":[{"key":"inHandDateBy","value":"In Hands Date"},{"key":"All","value":"* All *"},{"key":"orderAmount","value":"Order Amount"},{"key":"orderNo","value":"Quote #"},{"key":"orderIdentity","value":"Quote Identity"},{"key":"contactName","value":"Contact"},{"key":"salesPerson","value":"Sales Rep"},{"key":"accountName","value":"Account"},{"key":"orderType","value":"Order Type"},{"key":"orderDate","value":"Quote Date"},{"key":"bookedDate","value":"Booked Date"},{"key":"orderStatus","value":"Quote Status"},{"key":"paymentStatus","value":"Payment"},{"key":"totalPrice","value":"Total"},{"key":"balance","value":"Balance"},{"key":"actions","value":"Actions"},{"key":"corporateIdentityName","value":"Corporate Identity"},{"key":"partnerIdentityId","value":"Corporate Identity"},{"key":"projectName","value":"Project Name"},{"key":"customerPo","value":"Customer Po"},{"key":"csrName","value":"CSR Name"},{"key":"csr","value":"CSR Name"},{"key":"creditTerms","value":"Credit Terms"},{"key":"productionManagerName","value":"Prod. Manager"},{"key":"shipVia","value":"Ship Via"},{"key":"billComplete","value":"Bill Complete"},{"key":"isRushOrder","value":"Is Rush Order"},{"key":"shipDate","value":"Ship Date (Customer)"},{"key":"shipDateFrom","value":"Ship Date From (Customer)"},{"key":"shipDateTo","value":"Ship Date To (Customer)"},{"key":"inHandDateByTo","value":"In Hands Date To (Customer)"},{"key":"inHandDateByFrom","value":"In Hands Date From (Customer)"},{"key":"bookedDateFrom","value":"Booked Date From"},{"key":"bookedDateTo","value":"Booked Date To"},{"key":"orderDateTo","value":"Quote Date To"},{"key":"orderDateFrom","value":"Quote Date From"},{"key":"partnerIdentityName","value":"Corp. Identity"},{"key":"tagId","value":"Tag"},{"key":"tag","value":"Tag"},{"key":"inRushOrder","value":"Is Rush Order"},{"key":"favourite","value":"Favorite"},{"key":"comments","value":"Comments"},{"key":"task","value":"Activities"},{"key":"invoiceDate","value":"Invoice Date"},{"key":"invoiceDateFrom","value":"Invoice Date From"},{"key":"invoiceDateTo","value":"Invoice Date To"},{"key":"dueDate","value":"Due Date"},{"key":"salesPersonId","value":"Sales Person Id"},{"key":"proformaDate","value":"Pre Invoice Date"},{"key":"attentionTo","value":"Attention To"},{"key":"shippingAccountNo","value":"Shipping Account #"},{"key":"notePackagingSlip","value":"Note Packaging Slip"},{"key":"factoryShipDate","value":"Factory Ship Date"},{"key":"commssionGroupId","value":"Commission Group Id"},{"key":"expectedPrintDate","value":"Expected Print Date"},{"key":"supplierShipDate","value":"Supplier Ship Date"},{"key":"supplierInHandsDate","value":"Supplier In Hands Date"},{"key":"csrEmbroideryUserId","value":"CSR Embroidery User Id"},{"key":"csrScreenprintUserId","value":"CSR Screen Print User Id"},{"key":"productionManagerId","value":"Production Manager Id"},{"key":"salesManagerId","value":"Sales Manager Id"},{"key":"proofDueDate","value":"Proof Due Date"},{"key":"alternateAccountNumber","value":"Alternate Account #"},{"key":"altNumber","value":"Alt Number"}],"AccountsMapper":[{"key":"alternateAccountNumber","value":"Alt. Account Number"},{"key":"billAddress1","value":"Bill Address 1"},{"key":"billAddress2","value":"Bill Address 2"},{"key":"billCity","value":"Bill City"},{"key":"accountName","value":"Account Name"},{"key":"billCountry","value":"Bill Country"},{"key":"billPostalCode","value":"Bill Postal Code"},{"key":"billPostalcode","value":"Bill Postal Code"},{"key":"billState","value":"Bill State"},{"key":"commissionGroup","value":"Commission Group"},{"key":"customerPO","value":"Customer PO"},{"key":"creditTerms","value":"Credit Terms"},{"key":"csr","value":"CSR"},{"key":"dateCreated","value":"Date Created"},{"key":"dateModified","value":"Date Modified"},{"key":"dateModifiedFrom","value":"Date Modified From"},{"key":"fax","value":"Fax"},{"key":"firstOrderDate","value":"First Order Date"},{"key":"highCreditLimit","value":"Credit Limit"},{"key":"industry","value":"Industry"},{"key":"leadSource","value":"Lead Source"},{"key":"partnerAccount","value":"Partner Account"},{"key":"phone","value":"Phone"},{"key":"pricingMethods","value":"Pricing Methods"},{"key":"rating","value":"Rating"},{"key":"salesRep","value":"Sales Rep"},{"key":"productionManager","value":"Production Manager"},{"key":"shipAddress1","value":"Ship Addresss 1"},{"key":"shipAddress2","value":"Ship Address 2"},{"key":"shipCity","value":"Ship City"},{"key":"shipCountry","value":"Ship Country"},{"key":"shipPostalcode","value":"Ship Postal Code"},{"key":"shipPostalCode","value":"Ship Postal Code"},{"key":"shipState","value":"Ship State"},{"key":"taxExempt","value":"Tax Exempt"},{"key":"timeZone","value":"Time Zone"},{"key":"parentAccount","value":"Parent Account"},{"key":"partnerType","value":"Partner Type"},{"key":"firstOrderDateTo","value":"First Order Date To"},{"key":"firstOrderDateFrom","value":"First Order Date From"},{"key":"dateCreatedFrom","value":"Date Created From"},{"key":"dateCreatedTo","value":"Date Created To"},{"key":"dateModifieFrom","value":"Date Modified From"},{"key":"dateModifiedTo","value":"Date Modified To "},{"key":"corporateIdentityName","value":"Corporate Identity"},{"key":"tagId","value":"Tag"},{"key":"accountType","value":"Account Type"},{"key":"accountExtension","value":"Account Extension"},{"key":"vendorAccountNumber","value":"Vendor Account Number"},{"key":"defaultCurrency","value":"Currency"},{"key":"taxExemptCertExpDate","value":"Tax Exempt Expiration Date"}],"ArtworkMapper":[{"key":"thumbnail","value":"Image"},{"key":"task","value":"Task"},{"key":"designNo","value":"Design No"},{"key":"billCity","value":"Bill City"},{"key":"identity","value":"Name"},{"key":"customerName","value":"Customer Name"},{"key":"designTypeName","value":"Design Type"},{"key":"category","value":"Category"},{"key":"estimated","value":"Estimated"},{"key":"dueDate","value":"Due"},{"key":"customerPO","value":"Customer PO"},{"key":"createdDate","value":"Created"},{"key":"priority","value":"Priority"},{"key":"statusName","value":"Status"},{"key":"assignee","value":"Assignee"},{"key":"projectName","value":"Project"},{"key":"dateApproved","value":"Date Approved"},{"key":"approvedBy","value":"Approved By"},{"key":"orderNum","value":"Order Number"},{"key":"orderIdentity","value":"Order Identity"},{"key":"artworkContactName","value":"Artwork Contact Name"},{"key":"artworkContactEmail","value":"Artwork Contact Email"},{"key":"royaltyRetail","value":"Royality Retail"},{"key":"royaltyRetailAmountType","value":"Royality Retail Amount Type"},{"key":"royaltyWholesale","value":"Royality WholeSale"},{"key":"royaltyWholesaleAmountType","value":"Royality WholeSale Amount Type"},{"key":"pinned","value":"Pinned"},{"key":"salesRep","value":"Sales Rep"},{"key":"createdDateTo","value":"Created To"},{"key":"createdDateFrom","value":"Created From"},{"key":"dueDateTo","value":"Due To"},{"key":"dueDateFrom","value":"Due From"},{"key":"dateApprovedTo","value":"Date Approved To"},{"key":"dateApprovedFrom","value":"Date Approved From"},{"key":"salesManagerName","value":"Sales Manager"},{"key":"productionManagerName","value":"Prod. Manager"},{"key":"csrName","value":"CSR"},{"key":"alternateAccountNumber","value":"Alternate Account #"},{"key":"kanbanStatus","value":"Kanban Status"},{"key":"status","value":"Status"},{"key":"artworkLocation","value":"Artwork Location"}],"ProductsMapper":[{"key":"productId","value":"Item # "},{"key":"productName","value":"Name"},{"key":"inhouseId","value":"IN-House ID"},{"key":"productType","value":"Product Type"},{"key":"storeNames","value":"Store Names"},{"key":"vendorName","value":"Supplier"},{"key":"categoryName","value":"Categories"},{"key":"expirationDate","value":"Expiration Date"},{"key":"source","value":"Source"},{"key":"sourceProductSku","value":"Source Product Sku"},{"key":"dateCreated","value":"Date Created"},{"key":"dateModified","value":"Date Modified"},{"key":"catalogYear","value":"Catalog Year"},{"key":"poType","value":"LI Type"},{"key":"specialPrice","value":"Special Price"},{"key":"productChannel","value":"Product Channel"},{"key":"prodStatus","value":"Status"},{"key":"prodKind","value":"Kind"},{"key":"msrp","value":"MSRP"},{"key":"calculatorType","value":"Calculator Type"},{"key":"customerName","value":"Customer"},{"key":"countryOrigin","value":"Country Origin"},{"key":"assignedUserName","value":"Assigned User"},{"key":"productOrderType","value":"Product Order Type"},{"key":"manufacturerName","value":"Manufacture"},{"key":"autoPullEvents","value":"Auto-pull Events"},{"key":"productionTime","value":"Production Time"},{"key":"dateCreatedFrom","value":"Created From"},{"key":"dateCreatedTo","value":"Created To"},{"key":"productStatus","value":"Product Status"}],"ProductionMapper":[{"key":"customerName","value":"Customer"},{"key":"orderName","value":"Order"},{"key":"decoTypeName","value":"Decoration Type"},{"key":"productName","value":"Product Name"},{"key":"machineName","value":"Equipment"},{"key":"variationName","value":"Variation"},{"key":"statusName","value":"Status"},{"key":"vendorName","value":"Vendor"},{"key":"detailName","value":"Decoration Detail"},{"key":"qty","value":"Quantity"},{"key":"priorityName","value":"Priority"},{"key":"color","value":"Color"},{"key":"size","value":"Size"},{"key":"detailCount","value":"Decoration Detail Count"},{"key":"detailDescription","value":"Decoration Detail Desc"},{"key":"hours","value":"Hours"},{"key":"due","value":"Due Date"},{"key":"productionRate","value":"Production Rate"},{"key":"workOrderNo","value":"Work Order #"},{"key":"action","value":"Action"},{"key":"decorationGroup","value":"Decoration Group"},{"key":"scheduleDate","value":"Schedule Date"},{"key":"position","value":"Position"}],"LeadsMapper":[{"key":"title","value":"Title"},{"key":"status","value":"Status"},{"key":"contactName","value":"Contact Name"},{"key":"birthdate","value":"Birth Date"},{"key":"accountName","value":"Account Name"},{"key":"corporateIdentityName","value":"Corporate Identity"},{"key":"createdByName","value":"Created By"},{"key":"dateCreated","value":"Created"},{"key":"dateModified","value":"Modified"},{"key":"description","value":"Description"},{"key":"email","value":"Email"},{"key":"phoneWork","value":"Phone Number"},{"key":"firstName","value":"First Name"},{"key":"lastName","value":"Last Name"},{"key":"salesRep","value":"Sales Rep"},{"key":"website","value":"Website"},{"key":"name","value":"Name"},{"key":"productionManagerName","value":"Production Manager"},{"key":"salesManagerName","value":"Sales Manager"},{"key":"rating","value":"Rating"},{"key":"referedBy","value":"Refered By"},{"key":"leadSource","value":"Lead Source "},{"key":"dateCreatedFrom","value":"Created From"},{"key":"dateCreatedTo","value":"Created To"},{"key":"tagId","value":"Tag"},{"key":"tag","value":"Tag"},{"key":"productsOfInterest","value":"Products Of Interest"}],"OpportunitiesMapper":[{"key":"name","value":"Name"},{"key":"accountName","value":"Account Name"},{"key":"contactName","value":"Contact Name"},{"key":"leadSource","value":"Lead Source"},{"key":"opportunityType","value":"Opportunity Type"},{"key":"salesStage","value":"Sales Stage"},{"key":"amount","value":"Amount"},{"key":"dateCreated","value":"Created"},{"key":"dateModified","value":"Modified"},{"key":"salesRep","value":"Sales Rep"},{"key":"opportunityNo","value":"Opportunity No"},{"key":"probability","value":"Probability"},{"key":"productionManagerName","value":"Production Manager"},{"key":"salesManagerName","value":"Sales Manager"},{"key":"assignedSourcingRep","value":"Sourcing Rep"},{"key":"csrName","value":"CSR"},{"key":"createdBy","value":"Created By"},{"key":"dateClosed","value":"Close Date"},{"key":"inhandsDate","value":"In Hands Date"},{"key":"eventDate","value":"Event Date"},{"key":"dateClosedFrom","value":"Close Date From"},{"key":"dateClosedTo","value":"Close Date To"},{"key":"tagId","value":"Tag"},{"key":"tag","value":"Tag"}],"ContactsMapper":[{"key":"title","value":"Title"},{"key":"contactName","value":"Contact Name"},{"key":"accountName","value":"Account Name"},{"key":"dateCreated","value":"Created"},{"key":"dateModified","value":"Modified"},{"key":"email","value":"Email"},{"key":"salesRep","value":"Assigned To"},{"key":"productionManagerName","value":"Production Manager"},{"key":"salesManagerName","value":"Sales Manager"},{"key":"leadSource","value":"Lead Source "},{"key":"dateCreatedFrom","value":"Created From"},{"key":"dateCreatedTo","value":"Created To"},{"key":"tagId","value":"Tag"},{"key":"tag","value":"Tag"},{"key":"csrName","value":"CSR"},{"key":"dateRelated","value":"Related Date"},{"key":"department","value":"Department"},{"key":"commissionGroupName","value":"Commission Group"},{"key":"city","value":"City"},{"key":"state","value":"State"},{"key":"phone","value":"Phone"},{"key":"dateRelatedFrom","value":"Related Date From"},{"key":"dateRelatedTo","value":"Related Date To"},{"key":"dateModifiedFrom","value":"Modified From"},{"key":"dateModifiedTo","value":"Modified To"},{"key":"firstName","value":"First Name"},{"key":"lastName","value":"Last Name"},{"key":"shippingType","value":"Shipping Type"},{"key":"shippingAcctNumber","value":"Shipping Account Number"},{"key":"fax","value":"Fax"},{"key":"productionManager","value":"Production Manager"},{"key":"salesManager","value":"Sales Manager"},{"key":"csr","value":"CSR"},{"key":"accountType","value":"Account Status"},{"key":"partnerType","value":"Account Type"},{"key":"site","value":"Site"}],"KanbanViewHeaderI":{"__symbolic":"interface"},"KanbanViewCardI":{"__symbolic":"interface"},"KanbanViewListI":{"__symbolic":"interface"},"KanbanTableI":{"__symbolic":"interface"},"SearchFilterI":{"__symbolic":"interface"},"SearchCardI":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"orderColumnNameMapper"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"anterasoftware-kanban-saved-search-bar","template":"<div class=\"saved-search-container\" fxLayout=\"row\" fxLayoutAlign=\"start\" >\r\n  <span class=\"quick-search-box\"> <p>Quick Searches</p> </span>\r\n  <span *ngFor=\"let savedSearch of savedSearchList; let i = index\" (click)=\"onSelect(savedSearch)\" [ngClass]=\"{'saved-search-box': i < 10, 'selected-color': savedSearch.select}\">\r\n    <p *ngIf=\"i < 10\" class=\"saved-search-title\">  {{ savedSearch.title }} </p>\r\n   </span>\r\n\r\n  <span *ngIf=\"savedSearchList?.length > 10\" class=\"drop-down-container\">\r\n    <button mat-icon-button [matMenuTriggerFor]=\"remainingSearchList\" aria-label=\"saved-search-list\">\r\n      <mat-icon>keyboard_arrow_down</mat-icon>\r\n    </button>\r\n  </span>\r\n  <div class=\"container-next\" *ngIf=\"displayView === 'Schedule View'\">\r\n    <div class=\"icon-div\">\r\n      <button class=\"icon-btn\" (click)=\"fetchLastData()\">\r\n        <mat-icon class=\"collapsable-arrow\">arrow_back</mat-icon>\r\n      </button>\r\n    </div>\r\n    <p class=\"title\">Next Week</p>\r\n  <div class=\"icon-div\">\r\n    <button class=\"icon-btn\" (click)=\"fetchNextData()\">\r\n      <mat-icon class=\"collapsable-arrow\">arrow_forward</mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n</div>\r\n\r\n<mat-menu #remainingSearchList>\r\n  <div *ngFor=\"let list of this.getRemainingList(savedSearchList)\" >\r\n  <button mat-menu-item (click)=\"onSelect(list)\">\r\n    {{list.title }}\r\n  </button>\r\n  </div>\r\n</mat-menu>\r\n","styles":[".saved-search-container{width:100%;height:43px;border:1px solid #707070;white-space:nowrap;position:sticky;top:0;z-index:999999;background:#fff}.saved-search-container .selected-color{background-color:#ddd}.saved-search-container .quick-search-box{padding-left:15px;padding-right:15px;border-right:1px solid #707070;background-color:#ddd}.saved-search-container .saved-search-box{border-right:1px solid #707070;text-decoration:underline;padding-left:15px;padding-right:15px;max-width:15%}.saved-search-container .saved-search-box .saved-search-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.saved-search-container .drop-down-container{max-width:10%;border-left:1px solid #707070;position:absolute;right:0}.saved-search-container .container-next{display:flex;width:100%;flex-wrap:wrap;justify-content:flex-end;padding:10px;vertical-align:middle}.saved-search-container .container-next .title{margin-top:0;margin-bottom:0;line-height:24px;font-weight:700}.saved-search-container .container-next .icon-div{color:#3675b6}.saved-search-container .container-next .icon-div .collapsable-arrow{font-size:30px}.saved-search-container .container-next .icon-btn{border:none;background:no-repeat;cursor:pointer}.width-100{width:100%}"]}]}],"members":{"savedSearchList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"onSavedSearchSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"fetchNextKanbanData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"displayView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"fetchLastKanbanData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onSelect":[{"__symbolic":"method"}],"getRemainingList":[{"__symbolic":"method"}],"fetchNextData":[{"__symbolic":"method"}],"fetchLastData":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"anterasoftware-kanban-actions-bar","template":"<div class=\"actions-bar-container\">\r\n  <div fxLayout=\"row\">\r\n    <button class=\"actions-btn\" [matMenuTriggerFor]=\"actionBarList\" mat-button>ACTIONS <mat-icon inline=\"true\">arrow_drop_down</mat-icon></button>\r\n    <p *ngIf=\"selectedCount > 0\" class=\"select-title\"> Selected {{selectedCount}} </p>\r\n  </div>\r\n<!-- <div fxLayout=\"row\"  *ngIf=\"page === 'Productions'\">\r\n  <p class=\"action-title\"> ACTIONS</p>\r\n  <div class=\"arrow-down\" [matMenuTriggerFor]=\"actionBarList\"></div>\r\n  <button class=\"actions-btn\" [matMenuTriggerFor]=\"actionBarList\" mat-button>ACTIONS <mat-icon inline=\"true\">arrow_drop_down</mat-icon></button>\r\n  <p *ngIf=\"selectedCount > 0\" class=\"select-title\"> Selected {{selectedCount}} </p>\r\n</div> -->\r\n</div>\r\n\r\n<mat-menu #actionBarList>\r\n  <button *ngFor=\"let action of actionsList\" [disabled]=\"action.disabled\" (click)=\"onActionSelected(action)\" mat-menu-item >\r\n    <mat-icon *ngIf=\"action?.icon?.length > 0\"> {{ action?.icon}} </mat-icon>\r\n      {{ action.key }}\r\n  </button>\r\n</mat-menu>\r\n","styles":[".actions-bar-container{height:35px;border:1px solid #707070;padding:0 0 5px 10px;background-color:#fff;position:sticky;top:0;z-index:99999}.actions-bar-container .actions-title{font-style:bold;font-size:8px}.actions-bar-container .select-title{font-size:10px;margin-left:13px;margin-top:10px}.actions-bar-container .arrow-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #000;position:relative;top:12px;left:6px;cursor:pointer}.actions-bar-container .actions-btn{background:#f0f4fa;border-radius:5px;border:1px solid #2f528f;margin:5px;height:25px;font-size:12px;line-height:20px;width:100px}p{font-size:10px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"actionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"selectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"onActionsEventFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"onActionSelected":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"anterasoftware-kanban-account-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\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=\"vendorAccountNumber\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'vendorAccountNumber' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'vendorAccountNumber')\" *matCellDef=\"let element\" [matTooltip]=\"element?.vendorAccountNumber\"><p class=\"text-truncate\"> {{element?.vendorAccountNumber}} </p></td>\r\n  </ng-container>\r\n\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\r\n  <ng-container matColumnDef=\"shipState\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'shipState' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'shipState')\" *matCellDef=\"let element\" [matTooltip]=\"element?.shipState\"><p class=\"text-truncate\"> {{element?.shipState}} </p></td>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container matColumnDef=\"timeZone\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'timeZone' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'timeZone')\" *matCellDef=\"let element\" [matTooltip]=\"element?.timeZone\"><p class=\"text-truncate\"> {{element?.timeZone}} </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=\"defaultCurrency\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'defaultCurrency' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'defaultCurrency')\" *matCellDef=\"let element\" [matTooltip]=\"element?.defaultCurrency\"><p class=\"text-truncate\"> {{element?.defaultCurrency}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"fax\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'fax' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'fax')\" *matCellDef=\"let element\" [matTooltip]=\"element?.fax\"><p class=\"text-truncate\"> {{element?.fax}} </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=\"productionManager\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productionManager' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productionManager')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productionManager\"><p class=\"text-truncate\"> {{element?.productionManager}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"corporateIdentityName\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'corporateIdentityName' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'corporateIdentityName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.corporateIdentityName\"><p class=\"text-truncate\"> {{element?.corporateIdentityName}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"taxExempt\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'taxExempt' | orderColumnNameMapper : page : mappingFields }} </th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'taxExempt')\" *matCellDef=\"let element\" [matTooltip]=\"element?.taxExempt\"><p class=\"text-truncate\"> {{element?.taxExempt}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"highCreditLimit\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'highCreditLimit' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'highCreditLimit')\" *matCellDef=\"let element\" [matTooltip]=\"element?.highCreditLimit\"><p class=\"text-truncate\"> {{element?.highCreditLimit}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"customerPO\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'customerPO' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'customerPO')\" *matCellDef=\"let element\" [matTooltip]=\"element?.customerPO\"><p class=\"text-truncate\"> {{element?.customerPO}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"firstOrderDate\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'firstOrderDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'firstOrderDate')\" *matCellDef=\"let element\" [matTooltip]=\"element?.firstOrderDate\"><p class=\"text-truncate\"> {{ getDateFormat(element?.firstOrderDate) }} </p></td>\r\n  </ng-container>\r\n\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=\"industry\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'industry' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'industry')\" *matCellDef=\"let element\" [matTooltip]=\"element?.industry\"><p class=\"text-truncate\"> {{element?.industry}} </p></td>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container matColumnDef=\"pricingMethods\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'pricingMethods' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'pricingMethods')\" *matCellDef=\"let element\" [matTooltip]=\"element?.pricingMethods\"><p class=\"text-truncate\"> {{element?.pricingMethods}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"csr\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'csr' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'csr')\" *matCellDef=\"let element\" [matTooltip]=\"element?.csr\"><p class=\"text-truncate\"> {{element?.csr}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"parentAccount\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'parentAccount' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'parentAccount')\" *matCellDef=\"let element\" [matTooltip]=\"element?.parentAccount\"><p class=\"text-truncate\"> {{element?.parentAccount}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"alternateAccountNumber\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'alternateAccountNumber' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'alternateAccountNumber')\" *matCellDef=\"let element\" [matTooltip]=\"element?.alternateAccountNumber\"><p class=\"text-truncate\"> {{element?.alternateAccountNumber}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"rating\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'rating' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'rating')\" *matCellDef=\"let element\" [matTooltip]=\"element?.rating\"><p class=\"text-truncate\"> {{element?.rating}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"creditTerms\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'creditTerms' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'creditTerms')\" *matCellDef=\"let element\" [matTooltip]=\"element?.creditTerms\"><p class=\"text-truncate\"> {{element?.creditTerms}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"billAddress1\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'billAddress1' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'billAddress1')\" *matCellDef=\"let element\" [matTooltip]=\"element?.billAddress1\"><p class=\"text-truncate\"> {{element?.billAddress1}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"billAddress2\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'billAddress2' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'billAddress2')\" *matCellDef=\"let element\" [matTooltip]=\"element?.billAddress2\"><p class=\"text-truncate\"> {{element?.billAddress2}} </p></td>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container matColumnDef=\"billCity\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'billCity' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'billCity')\" *matCellDef=\"let element\" [matTooltip]=\"element?.billCity\"><p class=\"text-truncate\"> {{element?.billCity}} </p></td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"billCountry\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'billCountry' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'billCountry')\" *matCellDef=\"let element\" [matTooltip]=\"element?.billCountry\"><p class=\"text-truncate\"> {{element?.billCountry}} </p></td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"billPostalcode\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'billPostalcode' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'billPostalcode')\" *matCellDef=\"let element\" [matTooltip]=\"element?.billPostalcode\"><p class=\"text-truncate\"> {{element?.billPostalcode}} </p></td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"billState\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'billState' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'billState')\" *matCellDef=\"let element\" [matTooltip]=\"element?.billState\"><p class=\"text-truncate\"> {{element?.billState}} </p></td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"commissionGroup\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'commissionGroup' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'commissionGroup')\" *matCellDef=\"let element\" [matTooltip]=\"element?.commissionGroup\"><p class=\"text-truncate\"> {{element?.commissionGroup}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"shipAddress1\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'shipAddress1' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'shipAddress1')\" *matCellDef=\"let element\" [matTooltip]=\"element?.shipAddress1\"><p class=\"text-truncate\"> {{element?.shipAddress1}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"shipAddress2\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'shipAddress2' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'shipAddress2')\" *matCellDef=\"let element\" [matTooltip]=\"element?.shipAddress2\"><p class=\"text-truncate\"> {{element?.shipAddress2}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"shipCity\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'shipCity' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'shipCity')\" *matCellDef=\"let element\" [matTooltip]=\"element?.shipCity\"><p class=\"text-truncate\"> {{element?.shipCity}} </p></td>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container matColumnDef=\"shipCountry\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  {{ 'shipCountry' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'shipCountry')\" *matCellDef=\"let element\" [matTooltip]=\"element?.shipCountry\"><p class=\"text-truncate\"> {{element?.shipCountry}} </p></td>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container matColumnDef=\"shipPostalcode\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'shipPostalcode' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'shipPostalcode')\" *matCellDef=\"let element\" [matTooltip]=\"element?.shipPostalcode\"><p class=\"text-truncate\"> {{element?.shipPostalcode}} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"taxExemptCertExpDate\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'taxExemptCertExpDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'taxExemptCertExpDate')\" *matCellDef=\"let element\" [matTooltip]=\"element?.taxExemptCertExpDate\"><p class=\"text-truncate\"> {{ getDateFormat(element?.taxExemptCertExpDate) }} </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=\"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=\"accountExtension\">\r\n    <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  {{ 'accountExtension' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'accountExtension')\" *matCellDef=\"let element\" [matTooltip]=\"element?.accountExtension\"><p class=\"text-truncate\"> {{ element?.accountExtension }} </p></td>\r\n  </ng-container>\r\n\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]=\"[10,20, 50, 100]\" [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":["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}:host ::ng-deep .mat-sort-header-arrow{color:#fff}:host ::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}:host ::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}.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:10px}"]}]}],"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}}]}],"mappingFields":[{"__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":26,"character":3}}]}],"onColumnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"onPaginateFire":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"onSortFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"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"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-kanban-artwork-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\r\n    <ng-container matColumnDef=\"thumbnail\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'thumbnail' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'thumbnail')\" *matCellDef=\"let element\">\r\n        <img class=\"artwork-image-wide\"\r\n                [src]=\"element?.thumbnail || 'assets/images/ecommerce/product-image-placeholder.png'\"\r\n                />\r\n      </td>\r\n      <!-- <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'thumbnail')\" *matCellDef=\"let element\"> {{element?.thumbnail}}\r\n        <img class=\"artwork-image-wide\"\r\n                [src]=\"element?.thumbnail\"\r\n                [default]= \"'assets/images/ecommerce/product-image-placeholder.png'\"/>\r\n      </td> -->\r\n    </ng-container>\r\n\r\n\r\n    <ng-container matColumnDef=\"task\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'task' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'task')\" *matCellDef=\"let element\" [matTooltip]=\"element?.task\"><p class=\"text-truncate\"> {{element?.task}} </p></td>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container matColumnDef=\"designNo\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'designNo' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'designNo')\" *matCellDef=\"let element\" [matTooltip]=\"element?.designNo\"><p class=\"text-truncate\">{{element?.designNo}}</p></td>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container matColumnDef=\"identity\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'identity' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'identity')\" *matCellDef=\"let element\"  [matTooltip]=\"element?.identity\"><p class=\"text-truncate\"> {{element?.identity}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customerName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'customerName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'customerName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.customerName\"><p class=\"text-truncate\"> {{element?.customerName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"artworkLocation\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'artworkLocation' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'artworkLocation')\" *matCellDef=\"let element\" [matTooltip]=\"element?.artworkLocation\"><p class=\"text-truncate\"> {{element?.artworkLocation}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"designTypeName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'designTypeName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'designTypeName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.designTypeName\"><p class=\"text-truncate\"> {{element?.designTypeName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"category\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'category' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'category')\" *matCellDef=\"let element\" [matTooltip]=\"element?.category\"><p class=\"text-truncate\"> {{element?.category}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"estimated\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'estimated' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'estimated')\" *matCellDef=\"let element\" [matTooltip]=\"element?.estimated\"><p class=\"text-truncate\"> {{element?.estimated}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"dueDate\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'dueDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'dueDate')\" *matCellDef=\"let element\" [matTooltip]=\"element?.dueDate\"><p class=\"text-truncate\"> {{ getDateFormat(element?.dueDate) }} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"createdDate\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'createdDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'createdDate')\" *matCellDef=\"let element\" [matTooltip]=\"element?.createdDate\"><p class=\"text-truncate\"> {{ getDateFormat(element?.createdDate) }} </p></td>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container matColumnDef=\"priority\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'priority' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'priority')\" *matCellDef=\"let element\" [matTooltip]=\"element?.priority\"><p class=\"text-truncate\"> {{element?.priority}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"statusName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'statusName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'statusName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.statusName\"><p class=\"text-truncate\"> {{element?.statusName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"assignee\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'assignee' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'assignee')\" *matCellDef=\"let element\" [matTooltip]=\"element?.assignee\"><p class=\"text-truncate\"> {{element?.assignee}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"projectName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'projectName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'projectName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.projectName\"><p class=\"text-truncate\"> {{element?.projectName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"dateApproved\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'dateApproved' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'dateApproved')\" *matCellDef=\"let element\" [matTooltip]=\"element?.dateApproved\"><p class=\"text-truncate\"> {{ getDateFormat(element?.dateApproved) }} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"approvedBy\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'approvedBy' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'approvedBy')\" *matCellDef=\"let element\" [matTooltip]=\"element?.approvedBy\"><p class=\"text-truncate\"> {{element?.approvedBy}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"orderNum\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  {{ 'orderNum' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderNum')\" *matCellDef=\"let element\" [matTooltip]=\"element?.orderNum\"><p class=\"text-truncate\"> {{element?.orderNum}} </p></td>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container matColumnDef=\"orderIdentity\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  {{ 'orderIdentity' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderIdentity')\" *matCellDef=\"let element\" [matTooltip]=\"element?.orderIdentity\"><p class=\"text-truncate\"> {{element?.orderIdentity}} </p></td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"artworkContactName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  {{ 'artworkContactName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'artworkContactName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.artworkContactName\"><p class=\"text-truncate\"> {{element?.artworkContactName}} </p></td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"artworkContactEmail\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'artworkContactEmail' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'artworkContactEmail')\" *matCellDef=\"let element\" [matTooltip]=\"element?.artworkContactEmail\"><p class=\"text-truncate\"> {{element?.artworkContactEmail}} </p></td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"royaltyRetail\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef>  {{ 'royaltyRetail' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'royaltyRetail')\" *matCellDef=\"let element\" [matTooltip]=\"element?.royaltyRetail\"><p class=\"text-truncate\"> {{element?.royaltyRetail}} </p></td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"royaltyRetailAmountType\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'royaltyRetailAmountType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'royaltyRetailAmountType')\" *matCellDef=\"let element\" [matTooltip]=\"element?.royaltyRetailAmountType\"><p class=\"text-truncate\"> {{element?.royaltyRetailAmountType}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"royaltyWholesale\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'royaltyWholesale' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'royaltyWholesale')\" *matCellDef=\"let element\" [matTooltip]=\"element?.royaltyWholesale\"> <p class=\"text-truncate\"> {{element?.royaltyWholesale}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"royaltyWholesaleAmountType\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'royaltyWholesaleAmountType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'royaltyWholesaleAmountType')\" *matCellDef=\"let element\" [matTooltip]=\"element?.royaltyWholesaleAmountType\"><p class=\"text-truncate\"> {{element?.royaltyWholesaleAmountType}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"pinned\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'royaltyRetailAmountType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'pinned')\" *matCellDef=\"let element\" [matTooltip]=\"element?.pinned\"><p class=\"text-truncate\"> {{element?.pinned}} </p></td>\r\n    </ng-container>\r\n\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=\"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\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\r\n    <ng-container matColumnDef=\"alternateAccountNumber\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'alternateAccountNumber' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'alternateAccountNumber')\" *matCellDef=\"let element\" [matTooltip]=\"element?.alternateAccountNumber\"><p class=\"text-truncate\"> {{element?.alternateAccountNumber}} </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    <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]=\"[10,20, 50, 100]\" [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\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}}]}],"mappingFields":[{"__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":26,"character":3}}]}],"onColumnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"onPaginateFire":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"onSortFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"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"}]}},"ɵf":{"__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"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"anterasoftware-production-kanban-view-container","template":"<div cdkDropListGroup>\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\">\r\n  \r\n      <header *ngIf=\"i === 0\">\r\n        <div class=\"swimlane-header-date\"></div>\r\n        <div class=\"swimlane-header-title\">{{swimLane?.header?.title}}</div>\r\n  \r\n        <div class=\"swimlane-header-percentage\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\r\n          <div class=\"progress-left\">{{value}}%</div>\r\n          <div class=\"progress-right\">\r\n            <div class=\"progress-bar-container\">\r\n              <div class=\"progress-bar-div-gr\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n  \r\n        <div class=\"swimlane-header-quick-stats\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.jobs}}</div>\r\n              <div>Jobs</div>\r\n            </div>\r\n          </div>\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.pieces}}</div>\r\n              <div>Pieces</div>\r\n            </div>\r\n          </div>\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.hours}}</div>\r\n              <div>Hours</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n\r\n      <header *ngIf=\"i !== 0\">\r\n        <div class=\"swimlane-header-date\">{{swimLane?.header?.title}}</div>\r\n        <div class=\"swimlane-header-title\">{{swimLane?.header?.days}}</div> \r\n        \r\n        <div class=\"swimlane-header-percentage\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\r\n          <div class=\"progress-left\">{{value}}%</div>\r\n          <div class=\"progress-right\">\r\n            <div class=\"progress-bar-container\">\r\n              <div class=\"progress-bar-div-red\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n  \r\n        <div class=\"swimlane-header-quick-stats\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.jobs}}</div>\r\n              <div>Jobs</div>\r\n            </div>\r\n          </div>\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.pieces}}</div>\r\n              <div>Pieces</div>\r\n            </div>\r\n          </div>\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.hours}}</div>\r\n              <div>Hours</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n  \r\n      <!-- KANBAN SWIMLANE: ONE -->\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-production-kanban-machine-view-card [cardDetails]=\"card\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-production-kanban-machine-view-card>\r\n          </div>\r\n\r\n      </div>\r\n  \r\n      <!-- KANBAN SWIMLANE: CARD -->\r\n  \r\n  \r\n    </div>\r\n    \r\n  </div>\r\n","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:110px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;padding:8px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 345px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"equipments":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"onUpdateJob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"editCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"defaultImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":30,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-production-kanban-view-card","template":"<mat-card class=\"swimlane-card\">\r\n    <mat-card-header>\r\n      <mat-card-title [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">Due Date: {{ getDateFormat(cardDetails.dueDate) }}</mat-card-title>\r\n    </mat-card-header>\r\n\r\n    <a class=\"link\" [routerLink]=\"['/productions/', cardDetails?.id]\"><img mat-card-image [src]=\"cardDetails?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a> \r\n    <mat-card-content>\r\n      {{ cardDetails.customerName }} <br>\r\n      Job# {{ cardDetails.job }} <br>\r\n      Order# {{ cardDetails.order }} <br>\r\n      Type: {{ cardDetails.type }} <br>\r\n      Product: {{ cardDetails.product }}<br>\r\n    </mat-card-content>\r\n\r\n</mat-card>\r\n","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:400;margin-bottom:0}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]}]}],"members":{"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"anterasoftware-kanban-production-machine-dialog","template":"<div class=\"dialog-content-wrapper\">\r\n    <mat-toolbar matDialogTitle class=\"mat-accent m-0\">\r\n        <mat-toolbar-row>\r\n            <div><h2 *ngIf=\"editFlag; else newTitle\" class=\"swimlane-header\"> Edit Swimlane </h2>\r\n                <ng-template #newTitle>\r\n                    <h2 class=\"swimlane-header\">What machine would you like to schedule this job to?</h2>\r\n                </ng-template></div>\r\n        </mat-toolbar-row>\r\n    </mat-toolbar>\r\n\r\n    <mat-dialog-content class=\"p-24 m-0\">\r\n\r\n\r\n        <form fxLayout=\"column\" class=\"swimlane-modal-container\" [formGroup]=\"form\" fxLayoutAlign=\"space-between\" [formGroup]=\"form\">\r\n            <mat-form-field>\r\n                <mat-select formControlName=\"machineId\" placeholder=\"Select Machine\">\r\n                    <mat-option [value]=\"equipment.id\" *ngFor=\"let equipment of equipments\">{{ equipment.name }}</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n        \r\n            <!-- <mat-form-field>\r\n                <mat-label> Select Total </mat-label>\r\n                <mat-select formControlName=\"totalType\" placeholder=\"Select Total\">\r\n                    <mat-option *ngFor=\"let item of totalList\" [value]=\"item\">\r\n                        {{item}}\r\n                    </mat-option>\r\n                </mat-select>\r\n                <mat-hint class=\"hint\"> Please select what you would like to total. </mat-hint>\r\n            </mat-form-field> -->\r\n        \r\n            <!-- <div fxLayout=\"column\" fxLayoutGap=\"4px\">\r\n                <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn\" > Save </button>\r\n                <button mat-button (click)=\"onClose()\" class=\"cancel-btn\"> Cancel </button>\r\n            </div> -->\r\n        </form>\r\n\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions class=\"m-0 p-16\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n            <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn mat-raised-button mat-accent\" > Save </button>\r\n            <button mat-button (click)=\"onClose()\" class=\"cancel-btn mat-raised-button mat-accent\"> Cancel </button>\r\n        </div>\r\n\r\n    </mat-dialog-actions>\r\n</div>\r\n\r\n<!-- <form fxLayout=\"column\" class=\"swimlane-modal-container\" [formGroup]=\"form\" fxLayoutAlign=\"space-between\" [formGroup]=\"form\">\r\n    <div class=\"header-container\">\r\n        <h2 class=\"swimlane-header\">What machine would you like to schedule this job to?</h2>\r\n        <hr class=\"horizontal-line\">\r\n    </div>\r\n    <mat-form-field>\r\n        <mat-select formControlName=\"machineId\" placeholder=\"Select Machine\">\r\n            <mat-option [value]=\"equipment.id\" *ngFor=\"let equipment of equipments\">{{ equipment.name }}</mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n\r\n    !-- <mat-form-field>\r\n        <mat-label> Select Total </mat-label>\r\n        <mat-select formControlName=\"totalType\" placeholder=\"Select Total\">\r\n            <mat-option *ngFor=\"let item of totalList\" [value]=\"item\">\r\n                {{item}}\r\n            </mat-option>\r\n        </mat-select>\r\n        <mat-hint class=\"hint\"> Please select what you would like to total. </mat-hint>\r\n    </mat-form-field> --\r\n\r\n    <div fxLayout=\"column\" fxLayoutGap=\"4px\">\r\n        <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn\" > Save </button>\r\n        <button mat-button (click)=\"onClose()\" class=\"cancel-btn\"> Cancel </button>\r\n    </div>\r\n</form> -->\r\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":13,"character":112},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":13,"character":119}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":13,"character":26},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵi"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"setFormValues":[{"__symbolic":"method"}],"onSave":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-production-kanban-machine-view-container","template":"<div cdkDropListGroup>\r\n\r\n    <!-- KANBAN SWIMLANE CONTAINER: ONE -->\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\">\r\n  \r\n      <header *ngIf=\"i === 0\">\r\n        <div class=\"swimlane-header-title\">{{swimLane?.header?.title}}</div>\r\n  \r\n        <div class=\"swimlane-header-percentage\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\r\n          <div class=\"progress-left\">{{value}}%</div>\r\n          <div class=\"progress-right\">\r\n            <div class=\"progress-bar-container\">\r\n              <div class=\"progress-bar-div-red\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n  \r\n        <div class=\"swimlane-header-quick-stats\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.jobs}}</div>\r\n              <div>Jobs</div>\r\n            </div>\r\n          </div>\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.pieces}}</div>\r\n              <div>Pieces</div>\r\n            </div>\r\n          </div>\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.hours}}</div>\r\n              <div>Hours</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n\r\n      <header *ngIf=\"i !== 0\">\r\n        <div class=\"swimlane-header-title\">{{swimLane?.header?.title}}</div>\r\n  \r\n        <div class=\"swimlane-header-percentage\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\r\n          <div class=\"progress-left\">{{value}}%</div>\r\n          <div class=\"progress-right\">\r\n            <div class=\"progress-bar-container\">\r\n              <div class=\"progress-bar-div-red\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n  \r\n        <div class=\"swimlane-header-quick-stats\" fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.jobs}}</div>\r\n              <div>Jobs</div>\r\n            </div>\r\n          </div>\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.pieces}}</div>\r\n              <div>Pieces</div>\r\n            </div>\r\n          </div>\r\n          <div fxflex=\"33\">\r\n            <div fxLayout=\"column\">\r\n              <div>{{swimLane?.header?.hours}}</div>\r\n              <div>Hours</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n  \r\n      <!-- KANBAN SWIMLANE: ONE -->\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-production-kanban-machine-view-card [cardDetails]=\"card\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\" (click)=\"edit(card)\"></anterasoftware-production-kanban-machine-view-card>\r\n        </div>\r\n      </div>\r\n  \r\n      <!-- KANBAN SWIMLANE: CARD -->\r\n  \r\n  \r\n    </div>\r\n    \r\n  </div>\r\n","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:110px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;padding:8px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;overflow-y:scroll;height:calc(100vh - 345px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"equipments":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"onUpdateJob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"defaultImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"editCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":30,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"edit":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-production-kanban-machine-view-card","template":"<!-- KANBAN CARD -->\r\n<mat-card class=\"swimlane-card\">\r\n    <mat-card-header>\r\n      <mat-card-title [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">Due Date: {{ getDateFormat(cardToShow.dueDate) }}</mat-card-title>\r\n    </mat-card-header>\r\n\r\n    <a class=\"link\" [routerLink]=\"['/productions/', cardToShow?.id]\"><img mat-card-image [src]=\"cardToShow?.image\" onError=\"this.src = 'assets/images/ecommerce/placeholder-image.png'\"/></a>\r\n\r\n    <mat-card-content>\r\n      {{ cardToShow.customerName }} <br>\r\n      Job# {{ cardToShow.job }} <br>\r\n      Order# {{ cardToShow.order }} <br>\r\n      Type: {{ cardToShow.type }} <br>\r\n      Product: {{ cardToShow.product }} <br>\r\n    </mat-card-content>\r\n\r\n</mat-card>\r\n\r\n","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:400;margin-bottom:0}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]}]}],"members":{"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"anterasoftware-kanban-production-calendar-dialog","template":"<div class=\"dialog-content-wrapper\">\r\n    <mat-toolbar matDialogTitle class=\"mat-accent m-0\">\r\n        <mat-toolbar-row>\r\n            <div><h2 *ngIf=\"editFlag; else newTitle\" class=\"swimlane-header\"> Edit Swimlane </h2>\r\n                <ng-template #newTitle>\r\n                    <h2 class=\"swimlane-header\"> What day would you like to schedule this job to and <br/> have a calendar to pick the day?</h2>\r\n                </ng-template></div>\r\n        </mat-toolbar-row>\r\n    </mat-toolbar>\r\n\r\n    <mat-dialog-content class=\"p-24 m-0\">\r\n\r\n        <form fxLayout=\"column\" class=\"swimlane-modal-container\" [formGroup]=\"form\" fxLayoutAlign=\"space-between\" [formGroup]=\"form\">\r\n            <!-- <div class=\"header-container\">\r\n                <h2 class=\"swimlane-header\">What day would you like to schedule this job to and have a calendar to pick the day?</h2>\r\n                <hr class=\"horizontal-line\">\r\n            </div> -->\r\n            <mat-form-field>\r\n                <mat-select formControlName=\"machineId\" placeholder=\"Select Machine\">\r\n                    <mat-option [value]=\"equipment.id\" *ngFor=\"let equipment of equipments\">{{ equipment.name }}</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n        \r\n            <mat-form-field>\r\n                <input matInput formControlName=\"scheduleDate\" [matDatepicker]=\"picker\" placeholder=\"Select Day\">\r\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                <mat-datepicker #picker></mat-datepicker>\r\n            </mat-form-field>\r\n        \r\n            <!-- <mat-form-field>\r\n                <mat-label> Select Total </mat-label>\r\n                <mat-select formControlName=\"totalType\" placeholder=\"Select Total\">\r\n                    <mat-option *ngFor=\"let item of totalList\" [value]=\"item\">\r\n                        {{item}}\r\n                    </mat-option>\r\n                </mat-select>\r\n                <mat-hint class=\"hint\"> Please select what you would like to total. </mat-hint>\r\n            </mat-form-field> -->\r\n        \r\n            <!-- <div fxLayout=\"column\" fxLayoutGap=\"4px\">\r\n                <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn\" > Save </button>\r\n                <button mat-button (click)=\"onClose()\" class=\"cancel-btn\"> Cancel </button>\r\n            </div> -->\r\n        </form>\r\n\r\n    </mat-dialog-content>\r\n    <mat-dialog-actions class=\"m-0 p-16\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n            <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn mat-raised-button mat-accent\" > Save </button>\r\n            <button mat-button (click)=\"onClose()\" class=\"cancel-btn mat-raised-button mat-accent\"> Cancel </button>\r\n        </div>\r\n\r\n    </mat-dialog-actions>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- <form fxLayout=\"column\" class=\"swimlane-modal-container\" [formGroup]=\"form\" fxLayoutAlign=\"space-between\" [formGroup]=\"form\">\r\n    <div class=\"header-container\">\r\n        <h2 class=\"swimlane-header\">What day would you like to schedule this job to and have a calendar to pick the day?</h2>\r\n        <hr class=\"horizontal-line\">\r\n    </div>\r\n    <mat-form-field>\r\n        <mat-select formControlName=\"machineId\" placeholder=\"Select Machine\">\r\n            <mat-option [value]=\"equipment.id\" *ngFor=\"let equipment of equipments\">{{ equipment.name }}</mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n\r\n    <mat-form-field>\r\n        <input matInput formControlName=\"scheduleDate\" [matDatepicker]=\"picker\" placeholder=\"Select Day\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n        <mat-datepicker #picker></mat-datepicker>\r\n    </mat-form-field>\r\n\r\n    !--------------- <mat-form-field>\r\n        <mat-label> Select Total </mat-label>\r\n        <mat-select formControlName=\"totalType\" placeholder=\"Select Total\">\r\n            <mat-option *ngFor=\"let item of totalList\" [value]=\"item\">\r\n                {{item}}\r\n            </mat-option>\r\n        </mat-select>\r\n        <mat-hint class=\"hint\"> Please select what you would like to total. </mat-hint>\r\n    </mat-form-field> \r\n\r\n    <div fxLayout=\"column\" fxLayoutGap=\"4px\">\r\n        <button mat-button color=\"primary\" (click)=\"onSave()\" class=\"save-btn\" > Save </button>\r\n        <button mat-button (click)=\"onClose()\" class=\"cancel-btn\"> Cancel </button>\r\n    </div>\r\n</form> -->\r\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":13,"character":113},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":13,"character":120}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":13,"character":26},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵl"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"setFormValues":[{"__symbolic":"method"}],"onSave":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-kanban-productions-list-view","template":"<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onListViewSort($event)\" class=\"mat-elevation-z8\" 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=\"customerName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Customer </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'customerName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.customerName\">\r\n        <p class=\"text-truncate\">\r\n          <ng-container *ngIf='element.batchMaster && !element.order && element.batchJobs?.length && element.batchJobs[0]; else childNode'>\r\n            {{element?.batchJobs[0].customerName}}\r\n          </ng-container>\r\n          <ng-template #childNode>\r\n            {{element?.customerName}}\r\n          </ng-template>\r\n        </p>\r\n      </td>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container matColumnDef=\"orderName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Order </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'orderName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.orderName\">\r\n        <p class=\"text-truncate\">\r\n          <ng-container *ngIf='element.batchMaster && !element.order && element.batchJobs?.length && element.batchJobs[0]; else childNode'>\r\n            Batch# {{element?.batchJobs[0].orderName}}\r\n          </ng-container>\r\n          <ng-template #childNode>\r\n            {{element?.orderName}}\r\n          </ng-template>\r\n        </p>\r\n      </td>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container matColumnDef=\"decoTypeName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Decoration Type </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'decoTypeName')\" *matCellDef=\"let element\"  [matTooltip]=\"element?.decoTypeName\"><p class=\"text-truncate\"> {{element?.decoTypeName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"decorationGroup\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Decoration Group </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'decorationGroup')\" *matCellDef=\"let element\"  [matTooltip]=\"element?.decorationGroup\"><p class=\"text-truncate\"> {{element?.decorationGroup}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"productName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Product Name </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productName\"><p class=\"text-truncate\"> {{element?.productName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"machineName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Equipment </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'machineName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.machineName\"><p class=\"text-truncate\"> {{element?.machineName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"variationName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Variation </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'variationName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.variationName\"><p class=\"text-truncate\"> {{element?.variationName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"statusName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Status </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'statusName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.statusName\"><p class=\"text-truncate\"> {{element?.statusName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"vendorName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Vendor </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'vendorName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.vendorName\">\r\n        <p class=\"text-truncate\">\r\n          <ng-container *ngIf='element.batchMaster && !element.order && element.batchJobs?.length && element.batchJobs[0]; else childNode'>\r\n            {{element?.batchJobs[0].vendorName}}\r\n          </ng-container>\r\n          <ng-template #childNode>\r\n            {{element?.vendorName}}\r\n          </ng-template>\r\n        </p>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"detailName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Decoration Detail </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'detailName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.detailName\"><p class=\"text-truncate\"> {{element?.detailName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"qty\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Quantity </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'qty')\" *matCellDef=\"let element\" [matTooltip]=\"element?.qty\"><p class=\"text-truncate\"> {{element?.qty}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"priorityName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Priority </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'priorityName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.priorityName\"><p class=\"text-truncate\"> {{element?.priorityName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"color\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Color </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'color')\" *matCellDef=\"let element\" [matTooltip]=\"element?.color\"><p class=\"text-truncate\"> {{element?.color}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"size\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Size </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'size')\" *matCellDef=\"let element\" [matTooltip]=\"element?.size\"><p class=\"text-truncate\"> {{element?.size}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"detailCount\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Decoration Detail Count </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'detailCount')\" *matCellDef=\"let element\" [matTooltip]=\"element?.detailCount\"><p class=\"text-truncate\"> {{element?.detailCount}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"detailDescription\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Decoration Detail Desc </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'detailDescription')\" *matCellDef=\"let element\" [matTooltip]=\"element?.detailDescription\"><p class=\"text-truncate\"> {{element?.detailDescription}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"hours\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Hours </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'hours')\" *matCellDef=\"let element\" [matTooltip]=\"element?.hours\"><p class=\"text-truncate\"> {{element?.hours}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"due\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Due </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'due')\" *matCellDef=\"let element\" [matTooltip]=\"element?.due\"><p class=\"text-truncate\"> {{getDateFormat(element?.due)}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"productionRate\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Production Rate </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productionRate')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productionRate\"><p class=\"text-truncate\"> {{element?.productionRate}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"workOrderNo\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Work Order # </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'workOrderNo')\" *matCellDef=\"let element\" [matTooltip]=\"element?.workOrderNo\">\r\n        <p class=\"text-truncate\">\r\n          <ng-container *ngIf='element.batchMaster && !element.order && element.batchJobs?.length && element.batchJobs[0]; else childNode'>\r\n            {{element?.batchJobs[0].workOrderNo}}\r\n          </ng-container>\r\n          <ng-template #childNode>\r\n            {{element?.workOrderNo}}\r\n          </ng-template>\r\n        </p>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"action\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Action </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'action')\" *matCellDef=\"let element\" [matTooltip]=\"element?.action\"><p class=\"text-truncate\"> {{element?.action}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"scheduleDate\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> Schedule Date </th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'scheduleDate')\" *matCellDef=\"let element\" [matTooltip]=\"element?.action\"><p class=\"text-truncate\"> {{ getDateFormat(element?.scheduleDate) }}</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]=\"[10,20, 50, 100]\" [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\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}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"onColumnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"onPaginateFire":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"onSortFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"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"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"anterasoftware-orders-kanban-view-container","template":"<div cdkDropListGroup>\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\"> \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n            <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n              <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n            <div fxLayout=\"column\" class=\"total-position\">\r\n              <p>{{swimLane?.cards?.length}}/${{swimLane?.header?.total | number }}<br>\r\n              </p>\r\n            </div>\r\n        </div>\r\n        \r\n        <button class=\"action-btn\" mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n            <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n                <span>Edit Lane</span>\r\n            </button>\r\n            <button *ngIf=\"swimLane?.header?.title !== 'Open'\"  mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n                <span>Delete Lane</span>\r\n            </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-orders-kanban-view-card [cardDetails]=\"card\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-orders-kanban-view-card>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n    \r\n  </div>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px;width:100%}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container header .title-container .total-position{flex:auto;font-weight:550;color:#0277bd!important}.antera-swimlane-container header .title-container .total-position p{text-align:right}.antera-swimlane-container header .action-btn{min-width:auto!important;padding:0!important}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 236px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"equipments":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"updateOrderStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":35,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"openSwimLaneDialog":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-orders-kanban-view-card","template":"<!-- <mat-card class=\"swimlane-card\">\r\n    <mat-card-header>\r\n      <mat-card-title class=\"title-due-date\" [ngStyle]=\"{'background-color':dueColor}\">In Hands Date: {{ getDateFormat(cardDetails.inHandDateBy, true, false, true) }}</mat-card-title>\r\n    </mat-card-header>\r\n  \r\n    <mat-card-content>\r\n        <div fxLayout=\"row\" class=\"art-header\">\r\n            <mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>  \r\n              <div fxLayout=\"column\" class=\"card-content\">\r\n                <span>\r\n                  Identity: {{ cardDetails.orderIdentity }} <br>                  \r\n                  Account: {{ cardDetails.accountName }} <br>\r\n                  Sales Rep: {{ cardDetails.salesPerson }} <br>\r\n                  Contact: {{ cardDetails.contactName }}<br>\r\n                </span>\r\n              </div>\r\n            </div>\r\n    </mat-card-content>\r\n  \r\n  </mat-card> -->\r\n\r\n  <mat-card class=\"swimlane-card\">\r\n    <mat-card-header class=\"card-header\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">\r\n      <mat-card-title class=\"title-due-date\" [ngStyle]=\"{'background-color':dueColor}\">In Hands Date: {{ getDateFormat(cardDetails.inHandDateBy) }}</mat-card-title>\r\n    </mat-card-header>\r\n  \r\n    <!-- <a class=\"link\" [routerLink]=\"['/products/', cardDetails?.id]\"><img mat-card-image [src]=\"cardDetails?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a> --> \r\n    <mat-card-content>\r\n        <div fxLayout=\"row\" class=\"art-header\">\r\n          <mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position ml-12\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>  \r\n            <div fxLayout=\"column\" class=\"card-content\" [routerLink]=\"['/e-commerce/orders', cardDetails.id]\">\r\n              <span>\r\n                Order #: {{ cardDetails.orderNo }} <br>\r\n                Identity: {{ cardDetails.orderIdentity }} <br>                  \r\n                Account: {{ cardDetails.accountName }} <br>\r\n                Sales Rep: {{ cardDetails.salesPerson }} <br>\r\n                Contact: {{ cardDetails.contactName }}<br>\r\n              </span>\r\n            </div>\r\n          </div>\r\n    </mat-card-content>\r\n  \r\n  </mat-card>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd;background-color:#f4ffb9}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%;text-align:center}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{margin-top:8px;color:\"#ffffff\";text-align:center;font-size:12px;padding:0;font-weight:100;margin-bottom:0;line-height:24px;font-weight:400;display:inline}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-checkbox{display:inline;float:left;padding:0 2px}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:8px 0;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.swimlane-card .title-due-date{font-weight:700}.swimlane-card .list-card-name{font-size:14px}.swimlane-card .list-card-name .mat-checkbox{float:left;margin-right:6px}.swimlane-card .accent-800-fg{font-weight:550;color:#0277bd!important}.swimlane-card .content-span{margin-left:15px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.card-content{width:100%;padding:5px}.mat-star-icon{float:right}"]}]}],"members":{"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"pinned":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"anterasoftware-kanban-production-view","template":"<div cdkDropListGroup>\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\">\r\n  \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n          <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n              <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n        </div>\r\n        <button *ngIf=\"swimLane?.header?.title !== 'Pending' && swimLane?.header?.title !== 'Done'\" mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n       <!--  <div *ngIf=\"swimLane?.header; else newSwimLane\" class=\"swimlane-header-title\">\r\n          <div fxLayout=\"row\" class=\"title-container\">\r\n            <div fxLayout=\"column\" class=\"title-position\">\r\n                <p>{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n        </div>\r\n        <button mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\">more_vert</mat-icon>\r\n        </button>\r\n        </div> -->\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n          <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n              <span>Edit Lane</span>\r\n          </button>\r\n          <button mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n              <span>Delete Lane</span>\r\n          </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <!-- KANBAN SWIMLANE: ONE -->\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-kanban-production-view-card [cardDetails]=\"card\" (editCardDetails)=\"editCardDetails(card)\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\" (pinned)=\"pinned(card)\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-kanban-production-view-card>\r\n        </div>\r\n      </div>\r\n  \r\n      <!-- KANBAN SWIMLANE: CARD -->\r\n  \r\n  \r\n    </div>\r\n    \r\n  </div>\r\n","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 240px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"statusList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"onDropJob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"editCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onPin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"defaultImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":36,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"editCardDetails":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"pinned":[{"__symbolic":"method"}],"openSwimLaneDialog":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-kanban-production-view-card","template":"<mat-card class=\"swimlane-card\">\r\n  <mat-card-header>\r\n    <mat-card-title class=\"title-due-date\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">Due Date: {{ getDateFormat(cardToShow.dueDate) }}</mat-card-title>\r\n  </mat-card-header>\r\n\r\n  <a class=\"link\" [routerLink]=\"['/productions/', cardToShow?.id]\"><img mat-card-image [src]=\"cardToShow?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a>\r\n  <mat-card-content>\r\n      <div fxLayout=\"row\" class=\"art-header\" (click)=\"edit(card)\">\r\n        <mat-checkbox *ngIf=\"!cardToShow.batchMaster\" [(ngModel)]=\"cardToShow.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"card-content\">\r\n              <span>\r\n                 {{ cardToShow.customerName }} <br>\r\n                Job# {{ cardToShow.job }} <br>\r\n                Order# {{ cardToShow.order }} <br>\r\n                Type: {{ cardToShow.type }} <br>\r\n                Product: {{ cardToShow.product }}<br>\r\n              </span>\r\n            </div>\r\n            <span class=\"mat-star-icon\"><a aria-label=\"pin\" (click)=\"onPin($event)\"><mat-icon *ngIf=\"cardToShow.pinned\">star</mat-icon><mat-icon *ngIf=\"!cardToShow.pinned\">star_border</mat-icon></a></span>\r\n        </div>\r\n  </mat-card-content>\r\n\r\n</mat-card>\r\n","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0;font-weight:400}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.swimlane-card .title-due-date{font-weight:700}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.card-content{width:100%;padding:5px}.mat-star-icon{float:right}"]}]}],"members":{"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"pinned":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onPin":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-kanban-leads-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\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'status' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'status')\" *matCellDef=\"let element\" [matTooltip]=\"element?.status\"><p class=\"text-truncate\">{{element?.status}}</p></td>\r\n    </ng-container>\r\n\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=\"birthdate\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'birthdate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'birthdate')\" *matCellDef=\"let element\" [matTooltip]=\"element?.birthdate\"><p class=\"text-truncate\"> {{getDateFormat(element?.birthdate)}} </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=\"corporateIdentityName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'corporateIdentityName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'corporateIdentityName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.corporateIdentityName\"><p class=\"text-truncate\"> {{element?.corporateIdentityName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"createdByName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'createdByName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'createdByName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.createdByName\"><p class=\"text-truncate\"> {{element?.createdByName}} </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\r\n    <ng-container matColumnDef=\"description\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'description' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'description')\" *matCellDef=\"let element\" [matTooltip]=\"element?.description\"><p class=\"text-truncate\"> {{element?.description}} </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=\"firstName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'firstName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'firstName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.firstName\"><p class=\"text-truncate\"> {{element?.firstName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"lastName\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'lastName' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'lastName')\" *matCellDef=\"let element\" [matTooltip]=\"element?.lastName\"><p class=\"text-truncate\"> {{element?.lastName}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"phoneWork\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'phoneWork' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'phoneWork')\" *matCellDef=\"let element\" [matTooltip]=\"element?.phoneWork\"><p class=\"text-truncate\"> {{element?.phoneWork}} </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=\"website\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'website' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'website')\" *matCellDef=\"let element\" [matTooltip]=\"element?.website\"><p class=\"text-truncate\"> {{element?.website}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'name' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'name')\" *matCellDef=\"let element\" [matTooltip]=\"element?.name\"><p class=\"text-truncate\"> {{element?.name}} </p></td>\r\n    </ng-container>\r\n\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=\"rating\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'rating' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'rating')\" *matCellDef=\"let element\" [matTooltip]=\"element?.rating\"><p class=\"text-truncate\"> {{element?.rating}} </p></td>\r\n    </ng-container>\r\n    <ng-container matColumnDef=\"referedBy\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'referedBy' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'referedBy')\" *matCellDef=\"let element\" [matTooltip]=\"element?.referedBy\"><p class=\"text-truncate\"> {{element?.referedBy}} </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    <ng-container matColumnDef=\"productsOfInterest\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'productsOfInterest' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'productsOfInterest')\" *matCellDef=\"let element\" [matTooltip]=\"element?.productsOfInterest\"><p class=\"text-truncate\"> {{element?.productsOfInterest}} </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\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":13,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":13,"character":13}]}]}],"listDataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"displayedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"pageSizeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"tableLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"displayActionsBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"mappingFields":[{"__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}}]}],"__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"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-product-kanban-view","template":"<div cdkDropListGroup>\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\"> \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n          <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n                <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n        </div>\r\n        <button mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n          <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n              <span>Edit Lane</span>\r\n          </button>\r\n          <button *ngIf=\"swimLane?.header?.title !== 'Pending' && swimLane?.header?.title !== 'Done'\" mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n              <span>Delete Lane</span>\r\n          </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-product-kanban-view-card [cardDetails]=\"card\" (editCardDetails)=\"editCardDetails(card)\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\" (pinned)=\"pinned(card)\"  [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-product-kanban-view-card>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n    \r\n  </div>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 215px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"statusList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"onDropJob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"editCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"onPin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"defaultImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":33,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"editCardDetails":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"pinned":[{"__symbolic":"method"}],"openSwimLaneDialog":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-product-kanban-view-card","template":"<mat-card class=\"swimlane-card\">\r\n    <mat-card-header>\r\n      <mat-card-title class=\"title-due-date\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">Created Date: {{ getDateFormat(cardDetails.dateCreated) }}</mat-card-title>\r\n    </mat-card-header>\r\n  \r\n    <a class=\"link\" [routerLink]=\"['/products/', cardDetails?.id]\"><img mat-card-image [src]=\"cardDetails?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a> \r\n    <mat-card-content>\r\n        <div fxLayout=\"row\" class=\"art-header\" (click)=\"edit(card)\">\r\n          <mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>      \r\n              <div fxLayout=\"column\" class=\"card-content\">\r\n                <span>\r\n                   {{ cardDetails.productName }} <br>\r\n                  Item#: {{ cardDetails.productNo }} <br>                  \r\n                  Supplier: {{ cardDetails.supplier }} <br>\r\n                  In-House ID: {{ cardDetails.inHouseId }} <br>\r\n                  Type: {{ cardDetails.productType }}<br>\r\n                </span>\r\n              </div>\r\n              <!-- <span class=\"mat-star-icon\"><a aria-label=\"pin\" (click)=\"onPin($event)\"><mat-icon *ngIf=\"cardDetails.pinned\">star</mat-icon><mat-icon *ngIf=\"!cardDetails.pinned\">star_border</mat-icon></a></span>  -->\r\n          </div>\r\n    </mat-card-content>\r\n  \r\n  </mat-card>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0;font-weight:400}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.swimlane-card .title-due-date{font-weight:700}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.card-content{width:100%;padding:5px}.mat-star-icon{float:right}"]}]}],"members":{"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"pinned":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-kanban-leads-view-container","template":"<div cdkDropListGroup>\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\"> \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n          <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n              <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n            <div fxLayout=\"column\" class=\"total-position\">\r\n              <p>{{swimLane?.cards?.length}}<br>\r\n              </p>\r\n          </div>\r\n        </div>\r\n        <button class=\"action-btn\" mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n          <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n              <span>Edit Lane</span>\r\n          </button>\r\n          <button *ngIf=\"swimLane?.header?.title !== 'New' && swimLane?.header?.title !== 'Converted'\" mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n              <span>Delete Lane</span>\r\n          </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-kanban-leads-view-card [cardDetails]=\"card\" (editCardDetails)=\"editCardDetails(card)\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-kanban-leads-view-card>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n    \r\n  </div>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px;width:100%}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container header .title-container .total-position{flex:auto;font-weight:550;color:#0277bd!important}.antera-swimlane-container header .title-container .total-position p{text-align:right}.antera-swimlane-container header .action-btn{min-width:auto!important;padding:0!important}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 236px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"statusList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"onDropJob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"editCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"onPin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"onEditLead":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"defaultImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":34,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"editCardDetails":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"pinned":[{"__symbolic":"method"}],"openSwimLaneDialog":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"anterasoftware-kanban-leads-view-card","template":"<mat-card class=\"swimlane-card\">\r\n    <mat-card-header>\r\n      <mat-card-title class=\"title-due-date\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">Created Date: {{ getDateFormat(cardDetails.created) }}</mat-card-title>\r\n    </mat-card-header>\r\n  \r\n    <!-- <a class=\"link\" [routerLink]=\"['/products/', cardDetails?.id]\"><img mat-card-image [src]=\"cardDetails?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a> --> \r\n    <mat-card-content>\r\n        <div fxLayout=\"row\" class=\"art-header\">\r\n          <mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>      \r\n              <div fxLayout=\"column\" class=\"card-content\" (click)=\"editCard(card)\">\r\n                <span>\r\n                  Name: {{ cardDetails.name }}<br>                  \r\n                  Title: {{ cardDetails.title }} <br>\r\n                  Status: {{ cardDetails.status }} <br>\r\n                  Account: {{ cardDetails.accountName }} <br>\r\n                </span>\r\n              </div>\r\n            </div>\r\n    </mat-card-content>\r\n  \r\n  </mat-card>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0;font-weight:400}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.swimlane-card .title-due-date{font-weight:700}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.card-content{width:100%;padding:5px}.mat-star-icon{float:right}"]}]}],"members":{"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"editCardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}],"editCard":[{"__symbolic":"method"}]}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-opportunities-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=\"name\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'name' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'name')\" *matCellDef=\"let element\" [matTooltip]=\"element?.name\"><p class=\"text-truncate\"> {{element?.name}} </p></td>\r\n    </ng-container>\r\n\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\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=\"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=\"opportunityType\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'opportunityType' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'opportunityType')\" *matCellDef=\"let element\" [matTooltip]=\"element?.opportunityType\"><p class=\"text-truncate\"> {{element?.opportunityType}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"salesStage\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'salesStage' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'salesStage')\" *matCellDef=\"let element\" [matTooltip]=\"element?.salesStage\"><p class=\"text-truncate\"> {{element?.salesStage}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"amount\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'amount' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'amount')\" *matCellDef=\"let element\" [matTooltip]=\"element?.amount\"><p class=\"text-truncate\"> {{element?.amount}} </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=\"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, true, false, true) }} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"opportunityNo\">\r\n        <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'opportunityNo' | orderColumnNameMapper : page : mappingFields }}</th>\r\n        <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'opportunityNo')\" *matCellDef=\"let element\" [matTooltip]=\"element?.opportunityNo\"><p class=\"text-truncate\"> {{element?.opportunityNo}} </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, true, false, true) }} </p></td>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container matColumnDef=\"probability\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'probability' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'probability')\" *matCellDef=\"let element\" [matTooltip]=\"element?.probability\"><p class=\"text-truncate\"> {{element?.probability}} </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\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\r\n    <ng-container matColumnDef=\"assignedSourcingRep\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'assignedSourcingRep' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'assignedSourcingRep')\" *matCellDef=\"let element\" [matTooltip]=\"element?.assignedSourcingRep\"><p class=\"text-truncate\"> {{element?.assignedSourcingRep}} </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=\"createdBy\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'createdBy' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'createdBy')\" *matCellDef=\"let element\" [matTooltip]=\"element?.createdBy\"><p class=\"text-truncate\"> {{element?.createdBy}} </p></td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"dateClosed\">\r\n      <th mat-header-cell class=\"header-cell\" mat-sort-header *matHeaderCellDef> {{ 'dateClosed' | orderColumnNameMapper : page : mappingFields }}</th>\r\n      <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'dateClosed')\" *matCellDef=\"let element\" [matTooltip]=\"element?.dateClosed\"><p class=\"text-truncate\"> {{ getDateFormat(element?.dateClosed) }} </p></td>\r\n    </ng-container>\r\n\r\n  <ng-container matColumnDef='inhandsDate'>\r\n    <th mat-header-cell class='header-cell' mat-sort-header *matHeaderCellDef> {{ 'inhandsDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'inhandsDate')\" *matCellDef='let element' [matTooltip]='element?.inhandsDate'><p class='text-truncate'> {{ getDateFormat(element?.inhandsDate) }} </p></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef='eventDate'>\r\n    <th mat-header-cell class='header-cell' mat-sort-header *matHeaderCellDef> {{ 'eventDate' | orderColumnNameMapper : page : mappingFields }}</th>\r\n    <td mat-cell class=\"pointer\" (click)=\"onColumnClicked(element, 'eventDate')\" *matCellDef='let element' [matTooltip]='element?.eventDate'><p class='text-truncate'> {{ getDateFormat(element?.eventDate) }} </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\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}}]}],"mappingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"paginationList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"onColumnClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"onPaginateFire":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"onSortFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"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"}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"anterasoftware-opportunities-kanban-view-container","template":"<div cdkDropListGroup>\r\n    <div\r\n    class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\"> \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n          <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n                <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n            <div fxLayout=\"column\" class=\"total-position\">\r\n              <p>{{swimLane?.cards?.length}}/${{swimLane?.header?.total | number }}<br>\r\n              </p>\r\n          </div>\r\n        </div>\r\n        \r\n        <button class=\"action-btn\" mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n          <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n              <span>Edit Lane</span>\r\n          </button>\r\n          <button  *ngIf=\"swimLane?.header?.title !== 'Prospecting' && swimLane?.header?.title !== 'Proposal' && swimLane?.header?.title !== 'Negotiation Review' && swimLane?.header?.title !== 'Final Review' && swimLane?.header?.title !== 'Closed Won' && swimLane?.header?.title !== 'Closed Lost'\" mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n              <span>Delete Lane</span>\r\n          </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-opportunities-kanban-view-card [cardDetails]=\"card\" (editCardDetails)=\"editCardDetails(card)\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-opportunities-kanban-view-card>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n    \r\n  </div>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px;width:100%}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container header .title-container .total-position{flex:auto;font-weight:550;color:#0277bd!important}.antera-swimlane-container header .title-container .total-position p{text-align:right}.antera-swimlane-container header .action-btn{min-width:auto!important;padding:0!important}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 236px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"assignArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"deleteArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"editArtwork":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"onDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"onPin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"onEditOpportunity":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":29,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"openSwimLaneDialog":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"editCardDetails":[{"__symbolic":"method"}]}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-opportunities-kanban-view-card","template":"<mat-card class=\"swimlane-card\">\r\n    <mat-card-header class=\"card-header\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">\r\n      <mat-card-title class=\"title-due-date\">\r\n        Close Date: {{ getDateFormat(cardDetails.dateClosed) }}</mat-card-title>\r\n    </mat-card-header>\r\n  \r\n    <!-- <a class=\"link\" [routerLink]=\"['/products/', cardDetails?.id]\"><img mat-card-image [src]=\"cardDetails?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a> --> \r\n    <mat-card-content>\r\n        <div fxLayout=\"row\" class=\"art-header\">      \r\n          <div fxLayout=\"column\" class=\"card-content\">\r\n            <div class=\"list-card-name condensed\"\r\n              fxLayout=\"row\" \r\n              fxLayoutAlign=\"space-between center\"\r\n              >\r\n              <div fxLayout=\"row\"\r\n                  fxLayoutAlign=\"space-between center\">\r\n                 \r\n                  <span><mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>{{ cardDetails.name }}</span>\r\n              </div>\r\n              <span class=\"accent-800-fg\">${{cardDetails.amount | number }}</span>\r\n          </div>\r\n            <span class=\"content-span\" (click)=\"editCard(card)\">\r\n              {{ cardDetails.opportunityType }} <br>\r\n              {{ cardDetails.salesStage }} <br>\r\n              {{ cardDetails.accountName }} <br>\r\n              {{ cardDetails.contactName }} <br>\r\n              {{ getDateFormat(cardDetails.created, true, false, true) }}<br>\r\n              <span></span>\r\n            </span>\r\n          </div>\r\n        </div>\r\n    </mat-card-content>\r\n  \r\n  </mat-card>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd;background-color:#f4ffb9}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%;text-align:center}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{margin-top:8px;color:\"#ffffff\";text-align:center;font-size:12px;padding:0;font-weight:100;margin-bottom:0;line-height:24px;font-weight:400;display:inline}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-checkbox{display:inline;float:left;padding:0 2px}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:8px 0;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.swimlane-card .title-due-date{font-weight:700}.swimlane-card .list-card-name{font-size:14px}.swimlane-card .list-card-name .mat-checkbox{float:left;margin-right:6px}.swimlane-card .accent-800-fg{font-weight:550;color:#0277bd!important}.swimlane-card .content-span{margin-left:15px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.card-content{width:100%;padding:5px}.mat-star-icon{float:right}"]}]}],"members":{"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"editCardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}],"editCard":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"anterasoftware-quote-view-container","template":"<div cdkDropListGroup>\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\"> \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n          <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n              <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n            <div fxLayout=\"column\" class=\"total-position\">\r\n              <p>{{swimLane?.cards?.length}}/${{swimLane?.header?.total | number }}<br>\r\n              </p>\r\n          </div>\r\n        </div>\r\n        \r\n        <button class=\"action-btn\" mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n          <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n              <span>Edit Lane</span>\r\n          </button>\r\n          <button  *ngIf=\"swimLane?.header?.title !== 'Prospecting' && swimLane?.header?.title !== 'Proposal' && swimLane?.header?.title !== 'Negotiation Review' && swimLane?.header?.title !== 'Final Review' && swimLane?.header?.title !== 'Closed Won' && swimLane?.header?.title !== 'Closed Lost'\" mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n              <span>Delete Lane</span>\r\n          </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-quote-view-card [cardDetails]=\"card\" (editCardDetails)=\"editCardDetails(card)\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-quote-view-card>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n    \r\n  </div>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px;width:100%}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container header .title-container .total-position{flex:auto;margin-right:8px;font-weight:550;color:#0277bd!important}.antera-swimlane-container header .title-container .total-position p{text-align:right}.antera-swimlane-container header .action-btn{min-width:auto!important;padding:0!important}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 236px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"onDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"onEditQuote":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"updateQuoteStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":26,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"openSwimLaneDialog":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"editCardDetails":[{"__symbolic":"method"}]}},"ɵba":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-quote-view-card","template":"<mat-card class=\"swimlane-card\">\r\n    <mat-card-header class=\"card-header\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">\r\n      <mat-card-title class=\"title-due-date\" [ngStyle]=\"{'background-color':dueColor}\">In Hands Date: {{ getDateFormat(cardDetails.inHandDateBy) }}</mat-card-title>\r\n    </mat-card-header>\r\n  \r\n    <!-- <a class=\"link\" [routerLink]=\"['/products/', cardDetails?.id]\"><img mat-card-image [src]=\"cardDetails?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a> --> \r\n    <mat-card-content>\r\n        <div fxLayout=\"row\" class=\"art-header\">\r\n          <mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position ml-12\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>  \r\n            <div fxLayout=\"column\" class=\"card-content\" [routerLink]=\"['/e-commerce/quotes', cardDetails.id]\">\r\n              <span>\r\n                Order #: {{ cardDetails.orderNo }} <br>\r\n                Identity: {{ cardDetails.orderIdentity }} <br>                  \r\n                Account: {{ cardDetails.accountName }} <br>\r\n                Sales Rep: {{ cardDetails.salesPerson }} <br>\r\n                Contact: {{ cardDetails.contactName }}<br>\r\n              </span>\r\n            </div>\r\n          </div>\r\n    </mat-card-content>\r\n  \r\n  </mat-card>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd;background-color:#f4ffb9}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%;text-align:center}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{margin-top:8px;color:\"#ffffff\";text-align:center;font-size:12px;padding:0;font-weight:100;margin-bottom:0;line-height:24px;font-weight:400;display:inline}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-checkbox{display:inline;float:left;padding:0 2px}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:8px 0;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.swimlane-card .title-due-date{font-weight:700}.swimlane-card .list-card-name{font-size:14px}.swimlane-card .list-card-name .mat-checkbox{float:left;margin-right:6px}.swimlane-card .accent-800-fg{font-weight:550;color:#0277bd!important}.swimlane-card .content-span{margin-left:15px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.card-content{width:100%;padding:5px}.mat-star-icon{float:right}"]}]}],"members":{"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"editCardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}],"editCard":[{"__symbolic":"method"}]}},"ɵbb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"anterasoftware-account-kanban-view-container","template":"<div cdkDropListGroup>\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\"> \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n          <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n                <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n            <div fxLayout=\"column\" class=\"total-position\">\r\n              <p class=\"text-truncate\">{{swimLane?.cards?.length}}<br>\r\n              </p>\r\n          </div>\r\n        </div>\r\n        <button class=\"action-btn\" mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n          <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n              <span>Edit Lane</span>\r\n          </button>\r\n          <button *ngIf=\"swimLane?.header?.title !== 'New' && swimLane?.header?.title !== 'Converted'\" mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n              <span>Delete Lane</span>\r\n          </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-account-kanban-view-card [cardDetails]=\"card\" (editCardDetails)=\"editCardDetails(card)\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-account-kanban-view-card>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n    \r\n  </div>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px;width:100%}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container header .title-container .total-position{flex:auto;font-weight:550;color:#0277bd!important}.antera-swimlane-container header .title-container .total-position p{text-align:right}.antera-swimlane-container header .action-btn{min-width:auto!important;padding:0!important}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 236px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"statusList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"onDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"editCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"onPin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"onEditAccount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"defaultImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":34,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"editCardDetails":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"pinned":[{"__symbolic":"method"}],"openSwimLaneDialog":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}]}},"ɵbc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-account-kanban-view-card","template":"<mat-card class=\"swimlane-card\">\r\n    <mat-card-header>\r\n      <mat-card-title class=\"title-due-date\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">Created Date: {{ getDateFormat(cardDetails.dateCreated) }}</mat-card-title>\r\n    </mat-card-header>\r\n  \r\n    <!-- <a class=\"link\" [routerLink]=\"['/products/', cardDetails?.id]\"><img mat-card-image [src]=\"cardDetails?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a> --> \r\n    <mat-card-content>\r\n        <div fxLayout=\"row\" class=\"art-header\">\r\n          <mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>      \r\n              <div fxLayout=\"column\" class=\"card-content\"  [routerLink]=\"['/accounts/', cardDetails?.id]\">\r\n                <span>\r\n                  Name: {{ cardDetails.accountName }}<br>                  \r\n                  Sales Rep: {{ cardDetails.salesRep }} <br>\r\n                  Partner Type: {{ cardDetails.partnerType }} <br>\r\n                  Phone: {{ cardDetails.phone }} <br>\r\n                </span>\r\n              </div>\r\n            </div>\r\n    </mat-card-content>\r\n  \r\n  </mat-card>\r\n","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0;font-weight:400}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.swimlane-card .title-due-date{font-weight:700}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.card-content{width:100%;padding:5px}.mat-star-icon{float:right}"]}]}],"members":{"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"editCardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}],"editCard":[{"__symbolic":"method"}]}},"ɵbd":{"__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"}]}},"ɵbe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"anterasoftware-contacts-kanban-container-view","template":"<div cdkDropListGroup>\r\n    <div class=\"antera-swimlane-container\" *ngFor=\"let swimLane of swimLaneList; let i = index\"> \r\n    <header>\r\n      <div *ngIf=\"swimLane?.header; else newSwimLane\" fxLayout=\"row\" fxLayoutAlign=\"space-between\" class=\"kanban-header mat-elevation-z1\">\r\n        <div fxLayout=\"row\" class=\"title-container\">\r\n          <mat-checkbox class=\"checkbox-position mt-12\" (change)=\"onToggleAll($event, i)\"></mat-checkbox>\r\n            <div fxLayout=\"column\" class=\"title-position\" [matTooltip]=\"swimLane?.header?.title\">\r\n              <p class=\"text-truncate-status\">{{swimLane?.header?.title}}<br>\r\n                </p>\r\n            </div>\r\n            <div fxLayout=\"column\" class=\"total-position\">\r\n              <p>{{swimLane?.cards?.length}}<br>\r\n              </p>\r\n          </div>\r\n        </div>\r\n        <button class=\"action-btn\" mat-button [matMenuTriggerFor]=\"openSwimLane\">\r\n            <mat-icon aria-hidden=\"false\" aria-label=\"Example home icon\">more_vert</mat-icon>\r\n        </button>\r\n      </div>\r\n        <mat-menu #openSwimLane=\"matMenu\">\r\n          <button mat-menu-item (click)=\"openSwimLaneDialog(swimLane)\">\r\n              <span>Edit Lane</span>\r\n          </button>\r\n          <button *ngIf=\"swimLane?.header?.title !== 'New' && swimLane?.header?.title !== 'Converted'\" mat-menu-item (click)=\"deleteSwimLane(swimLane)\">\r\n              <span>Delete Lane</span>\r\n          </button>\r\n        </mat-menu>\r\n        <ng-template #newSwimLane>\r\n          <div>\r\n              <button mat-button (click)=\"openSwimLaneDialog()\" class=\"center list-add-btn\">\r\n                  <mat-icon aria-hidden=\"false\" aria-label=\"Add Icon\">add_circle</mat-icon>\r\n                  Add Swimlane\r\n              </button>\r\n          </div>\r\n      </ng-template>\r\n    </header>\r\n      <div class=\"antera-swimlane ngx-dnd-container\" ngxDroppable=\"card\" (drop)=\"drop($event,swimLane)\" [model]=\"swimlane\">\r\n        <div *ngFor=\"let card of swimLane.cards; let j = index\" class=\"card-container-dv ngx-dnd-item\" [ngxDraggable]=\"['card']\" [model]=\"card\">\r\n          <anterasoftware-contacts-kanban-card-view [cardDetails]=\"card\" (editCardDetails)=\"editCardDetails(card)\" (onCardDetailsChange)=\"cardValueChange(card, i, j)\" [dateFormatString]=\"dateFormatString\" [timeFormatString]=\"timeFormatString\"></anterasoftware-contacts-kanban-card-view>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n    \r\n  </div>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.antera-swimlane-container{background-color:#fff;display:inline-block;font-family:Roboto,sans-serif;max-width:100%;margin:0 25px 0 0;vertical-align:top;width:250px;border:1px solid #e8e8e8}.antera-swimlane-container header{background-color:transparent;min-height:50px;padding:0;border-bottom:1px solid #ddd}.antera-swimlane-container header .swimlane-header-date{background-color:transparent;color:#2d323e;display:block;font-size:12px;font-weight:700;height:25px;padding:10px 0 0;text-align:center}.antera-swimlane-container header .swimlane-header-title{background-color:transparent;color:#2d323e;display:block;font-size:16px;font-weight:700;height:27px;text-align:center;padding:15px 0}.antera-swimlane-container header .swimlane-header-percentage{background-color:transparent;color:#2d323e;display:block;font-size:12px;height:35px;padding:10px 0}.antera-swimlane-container header .swimlane-header-quick-stats{background-color:#797979;border-top:1px solid #fff;color:#fff;font-weight:100;height:50px;text-align:center}.antera-swimlane-container header .list-add-btn{width:100%;min-height:50px}.antera-swimlane-container header .title-container{margin-left:7px;width:100%}.antera-swimlane-container header .title-container .checkbox-position{top:50%;left:5px}.antera-swimlane-container header .title-container .title-position{margin-left:8px;width:100px}.antera-swimlane-container header .title-container .title-position .text-truncate-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.antera-swimlane-container header .title-container .total-position{flex:auto;font-weight:550;color:#0277bd!important}.antera-swimlane-container header .title-container .total-position p{text-align:right}.antera-swimlane-container header .action-btn{min-width:auto!important;padding:0!important}.antera-swimlane-container .antera-swimlane{background:#e4e4e4;border-radius:0;overflow-y:scroll;display:block;border:1px solid #ddd;border-top:none;border-bottom:none;height:calc(100vh - 236px);cursor:pointer}.antera-swimlane-container .antera-swimlane .swimlane-card{background-color:#fff;margin:0 0 5px;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0}.antera-swimlane-container .antera-swimlane .swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.progress-bar-container{width:100%;background-color:#e4e4e4;border-radius:2px}.progress-bar-div-gr{width:60%;height:15px;background-color:green;border-radius:2px}.progress-bar-div-red{width:60%;height:15px;background-color:red;border-radius:2px}.progress-left{float:left;width:40px;padding-left:5px}.progress-right{float:right;width:calc(100% - 40px);padding-right:2px}.card-container-dv{margin:0 0 8px}"]}]}],"members":{"swimLaneList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"statusList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"onDropJob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"editCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"selectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"onPin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"onSwimLaneChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"onDeleteSwimLane":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"onEditLead":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"defaultImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":36,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"editCardDetails":[{"__symbolic":"method"}],"cardValueChange":[{"__symbolic":"method"}],"pinned":[{"__symbolic":"method"}],"openSwimLaneDialog":[{"__symbolic":"method"}],"deleteSwimLane":[{"__symbolic":"method"}],"onToggleAll":[{"__symbolic":"method"}]}},"ɵbf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"anterasoftware-contacts-kanban-card-view","template":"<mat-card class=\"swimlane-card\">\r\n    <mat-card-header>\r\n      <mat-card-title class=\"title-due-date\" [ngStyle]=\"{'background-color':dueColor, 'color': dueFontColor}\">Created Date: {{ getDateFormat(cardDetails.created) }}</mat-card-title>\r\n    </mat-card-header>\r\n  \r\n    <!-- <a class=\"link\" [routerLink]=\"['/products/', cardDetails?.id]\"><img mat-card-image [src]=\"cardDetails?.image\" onError=\"this.src= 'assets/images/ecommerce/placeholder-image.png'\"/></a> --> \r\n    <mat-card-content>\r\n        <div fxLayout=\"row\" class=\"art-header\">\r\n          <mat-checkbox [(ngModel)]=\"cardDetails.select\" class=\"checkbox-position\" (change)=\"onCheckBoxSelected($event)\"></mat-checkbox>      \r\n              <div fxLayout=\"column\" class=\"card-content\" [routerLink]=\"['/contacts/', cardDetails?.id]\">\r\n                <span>\r\n                  Contact Name: {{ cardDetails.contactName }} <br>\r\n                  Title: {{ cardDetails.title }} <br>\r\n                  Account Name: {{ cardDetails.accountName }} <br>\r\n                  Phone: {{ cardDetails.phone }} <br>\r\n                  Email: {{ cardDetails.email }} <br>\r\n                </span>\r\n              </div>\r\n            </div>\r\n    </mat-card-content>\r\n  \r\n  </mat-card>","styles":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap\");.swimlane-card{background-color:#fff;border-radius:0;border:1px solid #ddd;box-shadow:6px 1px 0 #b5b5b5;padding:0;margin:5px}.swimlane-card ::ng-deep .mat-card-header{border-bottom:1px solid #ddd}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text{padding:0;margin:0;width:100%}.swimlane-card ::ng-deep .mat-card-header .mat-card-header-text .mat-card-title{background-color:#f4ffb9;text-align:center;font-size:12px;padding:5px 0;font-weight:100;margin-bottom:0;font-weight:400}.swimlane-card ::ng-deep .mat-card-content{font-size:14px;font-weight:400;padding:10px;white-space:break-spaces}.swimlane-card ::ng-deep .mat-card-image{margin:0 auto!important;padding:10px;display:block;width:50%!important}.swimlane-card .title-due-date{font-weight:700}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.card-content{width:100%;padding:5px}.mat-star-icon{float:right}"]}]}],"members":{"onCardDetailsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"editCardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"dateFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"timeFormatString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"cardDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onCheckBoxSelected":[{"__symbolic":"method"}],"getDateFormat":[{"__symbolic":"method"}],"editCard":[{"__symbolic":"method"}]}}},"origins":{"KanbanModule":"./lib/kanban.module","KanbanAddEditSwimLaneComponent":"./lib/kanban-add-edit-swimlane/kanban-add-edit-swimlane.component","KanbanBodyComponent":"./lib/kanban-body/kanban-body.component","KanbanContainerComponent":"./lib/kanban-container/kanban-container.component","KanbanFilterBarComponent":"./lib/kanban-filter-bar/kanban-filter-bar.component","KanbanHeaderComponent":"./lib/kanban-header/kanban-header.component","KanbanHeaderGridComponent":"./lib/kanban-header-grid/kanban-header-grid.component","KanbanOrderListViewComponent":"./lib/kanban-list-view/kanban-list-view.component","KanbanSearchComponent":"./lib/kanban-search/kanban-search.component","KanbanSearchAdvancedComponent":"./lib/kanban-search-advanced/kanban-search-advanced.component","KanbanSearchAdvancedFormComponent":"./lib/kanban-search-advanced-form/kanban-search-advanced-form.component","KanbanSearchContainerComponent":"./lib/kanban-search-container/kanban-search-container.component","KanbanSearchSavedComponent":"./lib/kanban-search-saved/kanban-search-saved.component","TagFilterData":"./lib/kanban-search-tag-filter-data/kanban-search-tag-filter-data.component","KanbanSearchTagFilterDataComponent":"./lib/kanban-search-tag-filter-data/kanban-search-tag-filter-data.component","KanbanViewCardComponent":"./lib/kanban-view-card/kanban-view-card.component","KanbanViewContainerComponent":"./lib/kanban-view-container/kanban-view-container.component","KanbanAddSavedSearchModalComponent":"./lib/kanban-add-saved-search-modal/kanban-add-saved-search-modal.component","KanbanSearchCardComponent":"./lib/kanban-search-card/kanban-search-card.component","KanbanConfirmationModalComponent":"./lib/kanban-confirmation-modal/kanban-confirmation-modal.component","KanbanProductsListComponent":"./lib/kanban-products-list/kanban-products-list.component","KeyValueI":"./models/common","KeyValue":"./models/common","Filters":"./models/common","AdvancedSearchFormData":"./models/common","AdvancedSearchContainerData":"./models/common","ActionI":"./models/common","Action":"./models/common","OrderListMapperI":"./models/Orders/order-list","OrderTableColumNameMapper":"./models/Orders/order-list","QuotesTableColumNameMapper":"./models/Orders/order-list","AccountsMapper":"./models/Orders/order-list","ArtworkMapper":"./models/Orders/order-list","ProductsMapper":"./models/Orders/order-list","ProductionMapper":"./models/Orders/order-list","LeadsMapper":"./models/Orders/order-list","OpportunitiesMapper":"./models/Orders/order-list","ContactsMapper":"./models/Orders/order-list","KanbanViewHeaderI":"./models/kanban-view/kanban-viewI","KanbanViewCardI":"./models/kanban-view/kanban-viewI","KanbanViewListI":"./models/kanban-view/kanban-viewI","KanbanTableI":"./models/list-view/kanbanList","SearchFilterI":"./models/list-view/kanbanList","SearchCardI":"./models/list-view/kanbanList","ɵa":"./lib/pipes/order-column-name-mapper.pipe","ɵb":"./lib/kanban-saved-search-bar/kanban-saved-search-bar.component","ɵc":"./lib/kanban-actions-bar/kanban-actions-bar.component","ɵd":"./lib/kanban-account-list-view/kanban-account-list-view.component","ɵe":"./lib/kanban-artwork-list-view/kanban-artwork-list-view.component","ɵf":"./lib/kanban-product-thumbnail-view/kanban-product-thumbnail-view.component","ɵg":"./lib/production-kanban-view-container/production-kanban-view-container.component","ɵh":"./lib/production-kanban-view-card/production-kanban-view-card.component","ɵi":"./lib/kanban-production-machine-dialog/kanban-production-machine-dialog.component","ɵj":"./lib/production-kanban-machine-view-container/production-kanban-machine-view-container.component","ɵk":"./lib/production-kanban-machine-view-card/production-kanban-machine-view-card.component","ɵl":"./lib/kanban-production-calendar-dialog/kanban-production-calendar-dialog.component","ɵm":"./lib/kanban-productions-list-view/kanban-productions-list-view.component","ɵn":"./lib/orders-kanban-view-container/orders-kanban-view-container.component","ɵo":"./lib/orders-kanban-view-card/orders-kanban-view-card.component","ɵp":"./lib/kanban-production-view/kanban-production-view.component","ɵq":"./lib/kanban-production-view-card/kanban-production-view-card.component","ɵr":"./lib/kanban-leads-list-view/kanban-leads-list-view.component","ɵs":"./lib/product-kanban-view/product-kanban-view.component","ɵt":"./lib/product-kanban-view-card/product-kanban-view-card.component","ɵu":"./lib/kanban-leads-view-container/kanban-leads-view-container.component","ɵv":"./lib/kanban-leads-view-card/kanban-leads-view-card.component","ɵw":"./lib/opportunities-list-view/opportunities-list-view.component","ɵx":"./lib/opportunities-kanban-view-container/opportunities-kanban-view-container.component","ɵy":"./lib/opportunities-kanban-view-card/opportunities-kanban-view-card.component","ɵz":"./lib/quote-view-container/quote-view-container.component","ɵba":"./lib/quote-view-card/quote-view-card.component","ɵbb":"./lib/account-kanban-view-container/account-kanban-view-container.component","ɵbc":"./lib/account-kanban-view-card/account-kanban-view-card.component","ɵbd":"./lib/contact-list-view/contact-list-view.component","ɵbe":"./lib/contacts-kanban-container-view/contacts-kanban-container-view.component","ɵbf":"./lib/contacts-kanban-card-view/contacts-kanban-card-view.component"},"importAs":"@anterasoftware/angular-material-kanban"}