dynamic-mat-table/dynamic-mat-table.metadata.json

dynamic-mat-table is an Angular component for presenting large and complex data with a lightning fast performance (at least 10x faster) and excellent level of control over the presentation.

{"__symbolic":"module","version":4,"metadata":{"isNullorUndefined":{"__symbolic":"function"},"clone":{"__symbolic":"function"},"deepClone":{"__symbolic":"function"},"getObjectProp":{"__symbolic":"function"},"copy":{"__symbolic":"function"},"HashMap":{"__symbolic":"interface"},"IDynamicCell":{"__symbolic":"interface"},"DynamicCellDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[dynamicCell]"}]}],"members":{"component":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"row":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"onRowEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Compiler","line":19,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":20,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":21,"character":16},{"__symbolic":"reference","name":"DynamicMatTableComponent"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"initComponent":[{"__symbolic":"method"}],"updateInput":[{"__symbolic":"method"}]}},"tableAnimation":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":60,"character":30},"arguments":["tableAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":61,"character":2},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"query","line":62,"character":4},"arguments":[":enter",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":62,"character":20},"arguments":[{"transform":"translateX(-50%)","opacity":0}]},{"optional":true}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"query","line":66,"character":4},"arguments":[":enter",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"stagger","line":68,"character":6},"arguments":["0.01s",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":69,"character":8},"arguments":["0.5s ease",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":71,"character":10},"arguments":[{"transform":"translateX(0%)","opacity":1}]}]}]]},{"optional":true}]}]]}]]},"expandAnimation":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":82,"character":31},"arguments":["detailExpand",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":83,"character":2},"arguments":["collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":83,"character":21},"arguments":[{"height":"0px","minHeight":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":84,"character":2},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":84,"character":20},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":85,"character":2},"arguments":["expanded <=> collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":87,"character":4},"arguments":["100ms cubic-bezier(0.4, 0.0, 0.2, 1)"]}]}]]},"DynamicMatTableComponent":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"ɵa"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":91,"character":1},"arguments":[{"selector":"dynamic-mat-table","animations":[{"__symbolic":"reference","name":"tableAnimation"},{"__symbolic":"reference","name":"expandAnimation"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":96,"character":19},"member":"OnPush"},"template":"<cdk-virtual-scroll-viewport #tbl [ngClass]=\"viewportClass\" [tvsItemSize]=\"rowHeight || 48\"\r\n  [headerHeight]=\"headerHeight || 56\" [footerHeight]=\"headerHeight || 56\" [headerEnabled]=\"headerEnable || true\"\r\n  [footerEnabled]=\"footerEnable || false\" [ngStyle]=\"{'background-color': backgroundColor || 'white'}\"\r\n  [class.print-preview]=\"printing\">\r\n\r\n  <mat-table matSort class=\"dynamic-table\" multiTemplateDataRows [cdkDropListDisabled]=\"false\" cdkDropList\r\n    cdkDropListOrientation=\"horizontal\" (cdkDragStarted)=\"dragStarted($event)\"\r\n    (cdkDropListDropped)=\"dropListDropped($event)\" [trackBy]=\"indexTrackFn\" [dataSource]=\"tvsDataSource\">\r\n    <!-- Select Checkbox Column -->\r\n    <ng-container matColumnDef=\"row-checkbox\">\r\n      <!-- HEADER -->\r\n      <mat-header-cell *matHeaderCellDef class=\"row-checkbox\" style=\"z-index: 2;\">\r\n        <mat-checkbox style=\"z-index: 10;\" (change)=\"$event ? masterToggle() : null\"\r\n          [checked]=\"rowSelectionModel.hasValue() && isAllSelected()\"\r\n          [indeterminate]=\"rowSelectionModel.hasValue() && !isAllSelected()\" *ngIf=\"rowSelectionMode === 'multi'\">\r\n        </mat-checkbox>\r\n        <!-- <mat-icon *ngIf=\"rowSelectionMode === 'single'\">indeterminate_check_box</mat-icon> -->\r\n      </mat-header-cell>\r\n      <!-- DATA -->\r\n      <mat-cell *matCellDef=\"let row\" class=\"row-checkbox\">\r\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"onRowSelectionChange($event, row)\"\r\n          [checked]=\"rowSelectionModel?.isSelected(row)\">\r\n        </mat-checkbox>\r\n      </mat-cell>\r\n      <!-- FOOTER -->\r\n      <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n    </ng-container>\r\n\r\n    <!-- Table Columns -->\r\n    <ng-container *ngFor=\"let column of columns; let i = index; trackBy: trackColumn\" [matColumnDef]=\"column.name\"\r\n      [sticky]=\"column.sticky === 'start' ? true : false\" [stickyEnd]=\"column.sticky === 'end' ? true : false\">\r\n      <!-- HEADER -->\r\n      <mat-header-cell *matHeaderCellDef cdkDrag [cdkDragDisabled]=\"column?.draggable === false\"\r\n        cdkDragBoundary=\"mat-header-row\" cdkDropListLockAxis=\"x\" [ngClass]=\"headerClass(column)\"\r\n        [cdkDragData]=\"{name: column.name, columIndex: i}\" [ngStyle]=\"column.style\"\r\n        [class.active-resize]=\"resizeColumn.columnIndex == i\" cdkDragBoundary=\"mat-header-row\">\r\n        <!-- class=\"left-resize-handler\" -->\r\n        <div class=\"resize-handler\"\r\n          [ngClass]=\"{'left-resize-handler': tableSetting.direction === 'ltr', 'right-resize-handler': tableSetting.direction === 'rtl'}\"\r\n          (mousedown)=\"onResizeColumn($event, i, 'left')\"></div>\r\n        <header-filter [field]=\"column\" (filterChanged)=\"filter_onChanged(column, $event)\"\r\n          [filters]=\"tvsDataSource.getFilter(column.name)\">\r\n          <mat-icon class=\"column-icon\" [ngStyle]=\"{ 'color': column?.iconColor }\">{{column?.icon}}</mat-icon>\r\n          <mat-icon *ngIf=\"column?.draggable != false\" class=\"drag-indicator\" cdkDragHandle>drag_indicator</mat-icon>\r\n          <div mat-sort-header [matTooltip]=\"column.header\" matTooltipClass=\"cell-tooltip\"\r\n            [disabled]=\"column.sort === 'none'\" class=\"header-caption\">{{ column.header }}</div>\r\n        </header-filter>\r\n        <!-- class=\"right-resize-handler\" -->\r\n        <div class=\"resize-handler\"\r\n          [ngClass]=\"{'right-resize-handler': tableSetting.direction === 'ltr', 'left-resize-handler': tableSetting.direction === 'rtl'}\"\r\n          (mousedown)=\"onResizeColumn($event, i, 'right')\"></div>\r\n      </mat-header-cell>\r\n      <!-- DATA -->\r\n      <mat-cell *matCellDef=\"let row;\" #cell (mouseenter)=\"tooltip_onChanged(column, row, cell,true)\"\r\n        (mouseleave)=\"tooltip_onChanged(column, row, cell,false)\" [class]=\"row[column.cellClass]\"\r\n        (click)=\"onCellClick($event, row, column)\" [ngClass]=\"cellClass(row?.option, column)\"\r\n        [ngStyle]=\"cellStyle(row?.option, column)\" (contextmenu)=\"onContextMenu($event, column, row)\">\r\n        <label *ngIf=\"!column.dynamicCellComponent\" (click)=\"onLabelClick($event, row, column)\"\r\n          [class.rtl-cell]=\"direction === 'rtl'\" [class.ltr-cell]=\"direction === 'ltr'\" [ngStyle]=\"ellipsis(column)\"\r\n          class=\"label-cell\">{{row[column.name]}}</label>\r\n        <ng-container *ngIf=\"column.dynamicCellComponent\" dynamicCell [component]=\"column.dynamicCellComponent\"\r\n          [column]=\"column\" [row]=\"row\" [onRowEvent]=\"onRowEvent\">\r\n        </ng-container>\r\n      </mat-cell>\r\n      <!-- FOOTER -->\r\n      <mat-footer-cell *matFooterCellDef [ngStyle]=\"column.style\">\r\n        <div *ngFor=\"let footer of column?.footer\" class=\"footer-column\">\r\n          <div [style.height.px]=\"footerHeight\" class=\"footer-row\">\r\n            <span> {{footer.aggregateText}}</span>\r\n          </div>\r\n        </div>\r\n      </mat-footer-cell>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"progress\">\r\n      <mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length\">\r\n        <mat-progress-bar mode=\"indeterminate\" [class.show]=\"pending\">\r\n        </mat-progress-bar>\r\n      </mat-header-cell>\r\n    </ng-container>\r\n\r\n    <!-- Expanded Content Column - The detail row is made up of Dynamic Cell -->\r\n    <ng-container *ngIf=\"expandColumn.length > 0\" matColumnDef=\"expandedDetail\">\r\n      <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"displayedColumns.length\" class=\"expanded-detail-cell\">\r\n        <div class=\"expanded-detail\" [@detailExpand]=\"row == expandedElement ? 'expanded' : 'collapsed'\">\r\n          <ng-container dynamicCell [component]=\"expandComponent\" [row]=\"row\" [onRowEvent]=\"onRowEvent\">\r\n          </ng-container>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <!-- Table Menu[ Sort, Visible, Export] -->\r\n    <ng-container matColumnDef=\"table-menu\" [stickyEnd]=\"true\" *ngIf=\"setting?.visibleTableMenu !== false\">\r\n      <mat-header-cell *matHeaderCellDef class=\"table-menu\">\r\n        <table-menu [(tableSetting)]=\"tableSetting\" (menuActionChange)=\"tableMenuActionChange($event)\"></table-menu>\r\n      </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let row\" class=\"table-menu\">\r\n        <row-menu *ngIf=\"rowContextMenuItems && rowContextMenuItems.length > 0\" [rowActionMenu]=\"row?.actionMenu\"\r\n          [actionMenus]=\"rowContextMenuItems\" [tableSetting]=\"tableSetting\"\r\n          (rowActionChange)=\"rowMenuActionChange($event, row)\"></row-menu>\r\n      </mat-cell>\r\n    </ng-container>\r\n\r\n    <!-- Row Table[Header, Data, Footer] -->\r\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\" (dblclick)=\"onRowDblClick($event, row)\"\r\n      (click)=\"onRowClick($event, row)\" [style.height.px]=\"rowHeight\" class=\"table-row\" [ngClass]=\"row?.option?.class\"\r\n      [ngStyle]=\"rowStyle(row)\" [class.expanded-row]=\"expandedElement === row\"\r\n      [class.row-selection]=\"rowSelectionModel ? rowSelectionModel.isSelected(row) : false\"\r\n      (contextmenu)=\"onContextMenu($event, null, row)\">\r\n    </mat-row>\r\n\r\n    <ng-container *ngIf=\"expandColumn.length > 0\">\r\n      <tr mat-row *matRowDef=\"let expandRow; columns: expandColumn\" class=\"detail-row\"></tr>\r\n    </ng-container>\r\n\r\n    <mat-header-row class=\"header\" [@tableAnimation] *matHeaderRowDef=\"displayedColumns; sticky: sticky\"\r\n      [style.top.px]=\"inverseOfTranslation\"></mat-header-row>\r\n    <ng-container *ngIf=\"displayedFooter.length > 0\">\r\n      <mat-footer-row class=\"footer\" [@tableAnimation] *matFooterRowDef=\"displayedFooter;\"></mat-footer-row>\r\n    </ng-container>\r\n    <mat-header-row class=\"progress\" *matHeaderRowDef=\"progressColumn; sticky: sticky\"\r\n      [style.top.px]=\"inverseOfTranslation + headerHeight - 5\"></mat-header-row>\r\n  </mat-table>\r\n</cdk-virtual-scroll-viewport>\r\n<pagination\r\n  *ngIf=\"pagingMode !== 'none'\"\r\n  [dir]=\"'ltr'\"\r\n  [pageIndex]=\"pagination?.pageIndex\"\r\n  [pageSize]=\"pagination?.pageSize\"\r\n  [pageSizeOptions]=\"pagination?.pageSizeOptions\"\r\n  [length]=\"pagination?.length\"\r\n  (page)=\"pagination_onChange($event)\">\r\n</pagination>\r\n<!-- <ng-content></ng-content> -->\r\n<ng-container *ngIf=\"showNoData && init === true\">\r\n  <div class=\"no-records\" *ngIf=\"tvsDataSource.data.length == 0\">\r\n    {{ languagePack?.tableLabels?.NoData }}\r\n    <br>\r\n    <button mat-icon-button type=\"button\" *ngIf=\"showReload === true\" color=\"primary\" (click)=\"reload_onClick()\">\r\n      <mat-icon>autorenew</mat-icon>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<!-- Context Menu -->\r\n<div style=\"visibility: hidden; position: fixed\" [style.left]=\"contextMenuPosition.x\"\r\n  [style.top]=\"contextMenuPosition.y\" [matMenuTriggerFor]=\"contextMenu\">\r\n</div>\r\n<mat-menu #contextMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <ng-container *ngFor=\"let menu of contextMenuItems\">\r\n      <button mat-button type=\"button\" [class.ltr-menu]=\"tableSetting.direction === 'rtl'\" [color]=\"menu.color\"\r\n        class=\"button-menu\" [disabled]=\"menu.disabled\" (click)=\"onContextMenuItemClick(menu)\">\r\n        <mat-icon>{{menu.icon}}</mat-icon>\r\n        <span [class.text-align-right]=\"tableSetting.direction === 'rtl'\" class=\"text-align-left\">{{menu.text}}</span>\r\n      </button>\r\n      <mat-divider *ngIf=\"menu.divider === true\"></mat-divider>\r\n    </ng-container>\r\n  </ng-template>\r\n</mat-menu>\r\n","styles":["@media print{.print-preview{background-color:#fff;position:fixed;width:100%;height:auto;z-index:99999999;margin:0;padding:0;top:0;left:0;overflow:visible;display:block}}.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{pointer-events:none}:host{display:flex;flex-direction:column;table-layout:fixed;min-height:200px;position:relative;overflow:auto;transition:.3s cubic-bezier(.46,-.72,.46,1.54);background-color:#f3f3f3;border:2px #009688}::ng-deep .cdk-virtual-scroll-content-wrapper{left:auto!important}::ng-deep .mat-menu-panel{min-height:48px}.label-cell{width:100%}mat-cell:first-of-type,mat-header-cell:first-of-type:not(.row-checkbox),mat-footer-cell:first-of-type{padding-left:0!important}.rtl-cell{padding-right:20px}.ltr-cell{padding-left:20px}.viewport{height:calc(100% - 0px)}.viewport-with-pagination{height:calc(100% - 48px)}.table-paginator{position:sticky;bottom:0;display:flex;flex-wrap:wrap;max-height:48px;align-items:center;overflow:hidden;direction:ltr}mat-footer-row,mat-row{min-height:auto!important}mat-row,tr.mat-header-row,mat-footer-row{display:flex;border-width:0;border-bottom-width:1px;border-bottom-color:#d2d2d2;border-style:solid;align-items:center;box-sizing:border-box}mat-cell,mat-footer-cell,mat-header-cell{align-self:stretch;color:inherit;background-color:inherit}.mat-table .row-selection{background-color:#f7f5f5}.mat-table .mat-row:hover{background-color:#fafafa}.mat-table mat-cell{box-sizing:border-box}.mat-header-row.progress{border:none;max-height:4px;min-height:4px;height:0;margin-top:-4px;background-color:transparent!important;border-top:transparent!important;background:transparent!important}.mat-header-row.progress .mat-header-cell{border:0;padding:0}.mat-header-row.progress mat-progress-bar{transition:height .3s,opacity .25s linear}.mat-header-row.progress mat-progress-bar:not(.show){height:0;opacity:0}.no-records{display:flex;align-items:center;top:50%;left:50%;margin:-42px 0 0 -25px;line-height:42px;position:absolute;z-index:1;pointer-events:none}.no-records button{pointer-events:initial}::ng-deep .dmf{min-width:100%}::ng-deep dynamic-mat-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .mat-table mat-row .mat-cell mat-form-field{max-width:100%}::ng-deep dynamic-mat-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .mat-table mat-row .mat-cell mat-form-field .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep dynamic-mat-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .mat-table mat-row .mat-cell mat-form-field ::ng-deep .mat-form-field-underline{bottom:0!important}mat-header-cell:hover .left-resize-handler{height:100%;transition:height .4s ease-out}mat-header-cell:hover .right-resize-handler{height:100%;transition:height .4s ease-out}.resize-handler{display:inline-block;min-width:1px;height:0;position:sticky;cursor:col-resize;border-width:0;z-index:10}.left-resize-handler{left:0;padding-right:10px;margin-right:-10px;border-left:solid 2px #8b8b8b}.right-resize-handler{right:0px;padding-left:10px;margin-left:-10px;border-right:solid 2px #8b8b8b}.active-resize{background-color:#f5f5f566}.ltr-menu span{float:left}.button-menu{width:100%;line-height:48px}.button-menu::ng-deep .mat-button-wrapper{display:flex}.button-menu::ng-deep .mat-button-wrapper span{display:inline-block;width:100%;text-align:left}.button-menu::ng-deep .mat-button-wrapper mat-icon{line-height:48px;height:48px;margin:0 5px}mat-button-wrapper .button-menu{display:inline-block!important}.text-align-left{text-align:left!important}.text-align-right{text-align:right!important}.mat-menu-panel{min-height:unset!important}.mat-sort-header-arrow{margin:0 6px!important}cdk-virtual-scroll-viewport{min-height:100px;height:inherit;overflow:auto}.header-caption{font-weight:bolder;font-size:14px;width:100%}.header{-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#fff}.footer{-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#fff}.row-checkbox{padding-left:0!important;padding-right:0!important;max-width:46px;min-width:46px}.row-checkbox mat-checkbox{padding:10px}.row-checkbox mat-icon{padding:11px!important}.table-menu{max-width:42px;min-width:0;min-width:initial;padding:0!important;background-color:inherit}:host .mat-header-row>.mat-header-cell:hover .column-icon{opacity:0;transform:translateY(5px);transition:all .2s}.drag-indicator{position:absolute;color:#0000004d;display:flex;opacity:0;transform:translateY(-5px);cursor:pointer;transition-duration:.4s;transition-property:opacity,transform;cursor:move}:host .mat-header-row>.mat-header-cell:hover .drag-indicator{opacity:1;pointer-events:fill;transform:translateY(0)}.drag-indicator:hover{color:#bfc0c0!important}.cdk-drag-preview{color:#000;min-height:55px;border:solid 1px #d4d4d4;background-color:#f5f5f5;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{border:dotted 1px #9c9c9c;background-color:#d3d3d3;content:none}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging{transition:transform .25s cubic-bezier(0,0,.2,1)}.detail-row{height:0px;display:inline!important;width:100%}.table-row:not(.expanded-row):hover{background:whitesmoke}.table-row:not(.expanded-row):active{background:#efefef}.table-row mat-cell{border-bottom-width:0}.expanded-detail{overflow:hidden;display:flex;background-color:#fafafa}.expanded-detail-cell{display:block;border-width:0;padding:0!important;width:100%;z-index:2}::ng-deep .cell-tooltip{padding:8px;font-size:12px;min-width:100px;text-align:center;margin-right:-20px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted black}.tooltip .tooltiptext{visibility:hidden;min-width:120px;background-color:#e91e63;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1;left:0;top:43px;margin-left:-86%}.tooltip:hover .tooltiptext{visibility:visible;white-space:pre}::ng-deep .mat-footer-cell{flex-direction:column!important}.footer-column{display:flex;flex-direction:column}.footer-column .footer-row{display:flex;flex-direction:row}.footer-column .footer-row span{display:inherit;align-items:center}\n"]}]}],"members":{"tbl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":101,"character":3},"arguments":["tbl",{"static":true}]}]}],"setting":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":136,"character":3},"arguments":["style.height.px"]}]}],"tooltipRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":138,"character":3},"arguments":["tooltip"]}]}],"contextMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":139,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuTrigger","line":139,"character":13}]}]}],"printRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":141,"character":3},"arguments":["printRef",{"static":true}]}]}],"printContentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":142,"character":3},"arguments":["printContentRef",{"static":true}]}]}],"headerFilterList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":143,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":157,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":158,"character":22},{"__symbolic":"reference","name":"TableIntl"},{"__symbolic":"reference","name":"TableService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":161,"character":16},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":162,"character":20},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayContainer","line":163,"character":30},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayPositionBuilder","line":164,"character":36},{"__symbolic":"reference","name":"TableSetting"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"tooltip_onChanged":[{"__symbolic":"method"}],"closeTooltip":[{"__symbolic":"method"}],"ellipsis":[{"__symbolic":"method"}],"trackColumn":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"refreshUI":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"headerClass":[{"__symbolic":"method"}],"rowStyle":[{"__symbolic":"method"}],"cellClass":[{"__symbolic":"method"}],"cellStyle":[{"__symbolic":"method"}],"cellIcon":[{"__symbolic":"method"}],"filter_onChanged":[{"__symbolic":"method"}],"onContextMenu":[{"__symbolic":"method"}],"onContextMenuItemClick":[{"__symbolic":"method"}],"tableMenuActionChange":[{"__symbolic":"method"}],"rowMenuActionChange":[{"__symbolic":"method"}],"pagination_onChange":[{"__symbolic":"method"}],"autoHeight":[{"__symbolic":"method"}],"reload_onClick":[{"__symbolic":"method"}],"onResizeColumn":[{"__symbolic":"method"}],"mouseMove":[{"__symbolic":"method"}],"expandRow":[{"__symbolic":"method"}],"onRowSelection":[{"__symbolic":"method"}],"onCellClick":[{"__symbolic":"method"}],"onLabelClick":[{"__symbolic":"method"}],"onRowDblClick":[{"__symbolic":"method"}],"onRowClick":[{"__symbolic":"method"}],"dragStarted":[{"__symbolic":"method"}],"dropListDropped":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"copyProperty":[{"__symbolic":"method"}]}},"createCompiler":{"__symbolic":"function","parameters":["compilerFactory"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"compilerFactory"},"member":"createCompiler"}}},"paginatorLabels":{"__symbolic":"function"},"DynamicMatTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":52,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":57,"character":4},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":65,"character":4},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":70,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":71,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":72,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":73,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":74,"character":4},[{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵj"}],{"__symbolic":"reference","name":"ɵl"}],"exports":[{"__symbolic":"reference","name":"DynamicMatTableComponent"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/core","name":"COMPILER_OPTIONS","line":82,"character":15},"useValue":{},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/core","name":"CompilerFactory","line":83,"character":15},"useClass":{"__symbolic":"reference","module":"@angular/platform-browser-dynamic","name":"JitCompilerFactory","line":83,"character":42},"deps":[{"__symbolic":"reference","module":"@angular/core","name":"COMPILER_OPTIONS","line":83,"character":69}]},{"provide":{"__symbolic":"reference","module":"@angular/core","name":"Compiler","line":84,"character":15},"useFactory":{"__symbolic":"reference","name":"createCompiler"},"deps":[{"__symbolic":"reference","module":"@angular/core","name":"CompilerFactory","line":84,"character":60}]},{"__symbolic":"reference","name":"TableIntl"},{"provide":{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorIntl","line":87,"character":15},"useFactory":{"__symbolic":"reference","name":"paginatorLabels"},"deps":[{"__symbolic":"reference","name":"TableIntl"}]},{"provide":{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayContainer","line":91,"character":15},"useClass":{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"FullscreenOverlayContainer","line":91,"character":43}}],"declarations":[{"__symbolic":"reference","name":"DynamicMatTableComponent"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"DynamicCellDirective"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"}],"entryComponents":[{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"DynamicMatTableModule"},"providers":[{"provide":{"__symbolic":"reference","name":"TableSetting"},"useValue":{"__symbolic":"reference","name":"config"}}]}}}},"TableService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"downloadBlob":[{"__symbolic":"method"}],"exportToCsv":[{"__symbolic":"method"}],"exportToJson":[{"__symbolic":"method"}],"loadSavedColumnInfo":[{"__symbolic":"method"}],"saveColumnInfo":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"TableVirtualScrollDataSource":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableDataSource","line":11,"character":70},"members":{"toTranslate":[{"__symbolic":"method"}],"getFilter":[{"__symbolic":"method"}],"setFilter":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"clearData":[{"__symbolic":"method"}],"refreshFilterPredicate":[{"__symbolic":"method"}],"pagingData":[{"__symbolic":"method"}],"_updateChangeSubscription":[{"__symbolic":"method"}],"initStreams":[{"__symbolic":"method"}]}},"LanguagePack":{"__symbolic":"interface"},"TableLabels":{"__symbolic":"interface"},"PaginatorLabels":{"__symbolic":"interface"},"FilterLabels":{"__symbolic":"interface"},"MenuLabels":{"__symbolic":"interface"},"ContextMenuItem":{"__symbolic":"interface"},"TableRow":{"__symbolic":"interface"},"TableSelectionMode":{"__symbolic":"interface"},"RowEventType":{"__symbolic":"interface"},"IRowEvent":{"__symbolic":"interface"},"ITableEvent":{"__symbolic":"interface"},"IRowActionMenuEvent":{"__symbolic":"interface"},"RowOption":{"__symbolic":"interface"},"AtRenderFunc":{"__symbolic":"interface"},"AtClassFunc":{"__symbolic":"interface"},"AtSortFunc":{"__symbolic":"interface"},"AtFilterFunc":{"__symbolic":"interface"},"ToPrint":{"__symbolic":"interface"},"ToExport":{"__symbolic":"interface"},"FieldType":{"__symbolic":"interface"},"FieldDisplay":{"__symbolic":"interface"},"FieldSticky":{"__symbolic":"interface"},"FieldFilter":{"__symbolic":"interface"},"FieldSort":{"__symbolic":"interface"},"TableField":{"__symbolic":"interface"},"AbstractField":{"__symbolic":"interface"},"PrintConfig":{"__symbolic":"interface"},"TablePaginationMode":{"__symbolic":"interface"},"TablePagination":{"__symbolic":"interface"},"Direction":{"__symbolic":"interface"},"DisplayMode":{"__symbolic":"interface"},"TableSetting":{"__symbolic":"class","members":{}},"SettingItem":{"__symbolic":"interface"},"VisibleActionMenu":{"__symbolic":"interface"},"TableIntl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{},"statics":{"ɵprov":{}}},"toggleFullscreen":{"__symbolic":"function"},"requestFullscreen":{"__symbolic":"function"},"exitFullscreen":{"__symbolic":"function"},"isFullscreen":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"document"},"member":"fullscreenElement"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"document"},"member":"webkitFullscreenElement"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"document"},"member":"msFullscreenElement"}}}}},"ɵa":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":39,"character":1},"arguments":[{"selector":"[core]"}]}],"members":{"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":44,"character":13},{"static":true}]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":45,"character":13},{"static":true}]}]}],"dataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"backgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":49,"character":3},"arguments":["style.direction"]}]}],"contextMenuItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"ScrollStrategyType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}}]}],"pagingMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"pagination":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"rowSelectionModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3}}]}],"rowSelectionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"tableName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":3}}]}],"showProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":177,"character":3}}]}],"initSystemField":[{"__symbolic":"method"}],"expandComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":3}}]}],"rowContextMenuItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":223,"character":3}}]}],"defaultWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":3}}]}],"minWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":225,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":226,"character":3}}]}],"updateColumn":[{"__symbolic":"method"}],"printConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":285,"character":3}}]}],"sticky":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":286,"character":3}}]}],"pending":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":287,"character":3}}]}],"rowHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":288,"character":3}}]}],"headerHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":289,"character":3}}]}],"footerHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":290,"character":3}}]}],"headerEnable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":291,"character":3}}]}],"footerEnable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":292,"character":3}}]}],"showNoData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":293,"character":3}}]}],"showReload":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":294,"character":3}}]}],"onTableEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":296,"character":3}}]}],"onRowEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":297,"character":3}}]}],"settingChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":298,"character":3}}]}],"paginationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":299,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TableService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":311,"character":16},{"__symbolic":"reference","name":"TableSetting"}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":348,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/table","name":"MatTable","line":348,"character":13},{"static":true}]}]}],"viewport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":349,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkVirtualScrollViewport","line":349,"character":13},{"static":true}]}]}],"updatePagination":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"setDisplayedColumns":[{"__symbolic":"method"}],"refreshGrid":[{"__symbolic":"method"}],"moveRow":[{"__symbolic":"method"}],"moveColumn":[{"__symbolic":"method"}],"refreshColumn":[{"__symbolic":"method"}],"isAllSelected":[{"__symbolic":"method"}],"masterToggle":[{"__symbolic":"method"}],"onRowSelectionChange":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"header-filter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":19},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":14,"character":22},"arguments":["listAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":15,"character":2},"arguments":["* <=> *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"query","line":16,"character":4},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":17,"character":7},"arguments":[{"opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"stagger","line":17,"character":30},"arguments":["10ms",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":17,"character":46},"arguments":["400ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":17,"character":72},"arguments":[{"opacity":1}]}]}]}],{"optional":true}]}]]}]]}],"template":"<ng-content></ng-content>\r\n\r\n<mat-menu filter-event #filterMenu=\"matMenu\" class=\"menu\">\r\n  <ng-template matMenuContent>\r\n\r\n    <div filter-event class=\"menu-title\">\r\n      {{field?.header}}\r\n    </div>\r\n    <div [@listAnimation]=\"filters.length\" filter-event *ngFor=\"let filter of filters; let index = index\"\r\n      class=\"filter-panel\">\r\n\r\n      <mat-form-field>\r\n        <mat-select [value]=\"filter.selectedIndex\" [panelClass]=\"'mat-elevation-z10'\"\r\n          (selectionChange)=\"filter.selectedIndex = $event.value;\" placeholder='Conditions'\r\n          (keyup.enter)=\"applyFilter_OnClick()\">\r\n          <mat-option *ngFor=\"let op of filter.getOperations(); let selectedIndex=index\" [value]=\"selectedIndex\">\r\n            {{ op.text }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div *ngFor=\"let ctrl of filter?.parameters\">\r\n        <mat-form-field class=\"input-field\">\r\n          <mat-label>{{ctrl.text}}</mat-label>\r\n          <input matInput #filterInput=\"matInput\" [(ngModel)]=\"ctrl.value\" [placeholder]=\"\"\r\n            (keyup.enter)=\"applyFilter_OnClick()\" autocomplete=\"off\" />\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"or-and\">\r\n        <span *ngIf=\"filters?.length !== index+1\" class=\"selected-filter-type\">{{ filter?.type === 'and' ?\r\n          languagePack.filterLabels.And : languagePack.filterLabels.Or}}</span>\r\n        <span class=\"svg\">\r\n          <mat-icon (click)=\"filterAction_OnClick(index,0)\">add</mat-icon>\r\n        </span>\r\n        <span class=\"svg\">\r\n          <mat-icon (click)=\"filterAction_OnClick(index,1)\" style=\"transform: rotate(90deg);\">drag_handle</mat-icon>\r\n        </span>\r\n        <span class=\"svg\">\r\n          <mat-icon (click)=\"filterAction_OnClick(index,2)\">clear</mat-icon>\r\n        </span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div filter-event class=\"menu-action\">\r\n      <button mat-raised-button type=\"button\" (click)=\"clearColumn_OnClick()\">{{ languagePack.filterLabels.Clear\r\n        }}</button>\r\n      <button mat-raised-button type=\"button\" color=\"primary\" (click)=\"applyFilter_OnClick()\">{{\r\n        languagePack.filterLabels.Search}}</button>\r\n    </div>\r\n  </ng-template>\r\n</mat-menu>\r\n\r\n<span class=\"trigger\" [matMenuTriggerFor]=\"filterMenu\" *ngIf=\"field.filter !== 'none'\">\r\n  <mat-icon>filter_list</mat-icon>\r\n</span>\r\n","styles":["@media print{.print-preview{background-color:#fff;position:fixed;width:100%;height:auto;z-index:99999999;margin:0;padding:0;top:0;left:0;overflow:visible;display:block}}.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{pointer-events:none}:host{display:flex;align-items:center;width:100%;align-self:stretch}.trigger{color:#0000004d;display:flex;opacity:0;transform:translateY(-5px);cursor:pointer;transition-duration:.4s;transition-property:opacity,transform;position:sticky;right:0px;z-index:1;padding-left:0 8px}:host.has-value .trigger{opacity:1;color:#0000008a}:host:hover .trigger,:host.show-trigger .trigger{opacity:1;transform:translateY(-1px)}::ng-deep .mat-menu-content:not(:empty){padding:0!important}.mat-menu-item-highlighted:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item:hover:not([disabled]){background-color:inherit}.input-field{margin-top:-15px}.menu-title{font-weight:bolder;top:-8px;position:sticky;background-color:#fff;z-index:1}.menu-action{position:sticky;bottom:-8px;padding-top:10px;padding-bottom:0;background-color:#fff}.menu-action button{width:calc(50% - 10px);margin:5px;border-radius:10px}.filter-panel{border-radius:5px;background-color:#fdfbfb;border:solid 1px #efefef;transition:all .5s;padding:5px;overflow:hidden;font-size:14px;margin-top:10px;display:flex;flex-direction:column}.filter-panel:nth-child(2){margin-top:0!important}.filter-panel:hover{border:solid 1px #d1d1d1}.filter-panel:hover .svg{opacity:1;transform:translateY(-1px)}.or-and{display:inherit!important;text-align:right;margin:-12px 0;height:35px;cursor:inherit;font-size:12px}.svg{color:#0000004d;display:flex;opacity:0;transform:translateY(-5px);transition-duration:.4s;transition-property:opacity,transform;margin-left:5px;padding:2px;border-radius:5px;color:#4c4c4c;cursor:pointer;display:inline-block!important;height:24px}.svg mat-icon{margin:0;vertical-align:top;border-radius:5px}.svg mat-icon:hover{color:#fff;background-color:#89898a}.svg:hover{background-color:#f8f8f8}.selected-filter-type{float:left;color:#fff;background-color:#89898a;border-radius:5px;padding:0 4px;line-height:24px}::ng-deep .menu{padding:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"]}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"filterChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"filterInputList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":35,"character":3},"arguments":["filterInput"]}]}],"menu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuTrigger","line":36,"character":13},{"static":true}]}]}],"filters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"hasValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":52,"character":3},"arguments":["class.has-value"]}]}],"showTrigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":57,"character":3},"arguments":["class.show-trigger"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TableIntl"},{"__symbolic":"reference","name":"TableService"},{"__symbolic":"refere