{"__symbolic":"module","version":4,"metadata":{"UxgTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"TableComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkTableModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":4}],"exports":[{"__symbolic":"reference","name":"TableComponent"}]}]}],"members":{}},"TableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"uxg-table","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":31,"character":17},"member":"None"},"template":"<div class=\"uxg-data-table\">\n  <table\n    mat-table\n    matSort\n    cdkDropListGroup\n    [dataSource]=\"dataToComponent\"\n    (matSortChange)=\"sortData($event)\"\n    class=\"mat-elevation-z8 main-data-table\"\n  >\n    <ng-container matColumnDef=\"uxg-table-select-row\" *ngIf=\"multiSelect\">\n      <th mat-header-cell *matHeaderCellDef>\n        <mat-checkbox\n          (change)=\"multiSelectAllRows($event)\"\n          [checked]=\"selections.length !== 0 && selections.length === this.dataToComponent.length\"\n          [indeterminate]=\"selections.length !== 0 && selections.length !== this.dataToComponent.length\"\n          color=\"primary\"\n        >\n        </mat-checkbox>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <mat-checkbox\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"multiSelectRowClick(row)\"\n          [checked]=\"isRowSelected(row)\"\n          color=\"primary\"\n        >\n        </mat-checkbox>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n    <ng-container matColumnDef=\"{{ column.name }}\" *ngFor=\"let column of columns; let columnIndex = index\">\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        cdkDropList\n        cdkDropListLockAxis=\"x\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"columnDropped($event, columnIndex)\"\n        cdkDrag\n        (cdkDragStarted)=\"columnDragStarted($event, columnIndex)\"\n        [cdkDragDisabled]=\"!columnDragEnable\"\n        [ngClass]=\"{\n          left: column.align === 'left',\n          center: column.align === 'center',\n          right: column.align === 'right'\n        }\"\n      >\n        {{ column.displayName ? column.displayName : column.name }}\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let element\"\n        [ngClass]=\"{\n          left: column.align === 'left',\n          center: column.align === 'center',\n          right: column.align === 'right'\n        }\"\n      >\n        <!-- view cell, display data cell according to the type -->\n        <div\n          [ngSwitch]=\"column.type\"\n          class=\"uxg-table-row-view\"\n          [ngClass]=\"{ 'uxg-cell-hidden': element.uxgTableEdit }\"\n        >\n          <div *ngSwitchCase=\"'date'\">\n            <mat-icon>date_range</mat-icon>\n            {{ element[column.name] }}\n          </div>\n          <div *ngSwitchCase=\"'cellTemplate'\">\n            <ng-template\n              [ngTemplateOutletContext]=\"{\n                element: element,\n                column: column,\n                emiter: column.cellTemplateEmiter\n              }\"\n              [ngTemplateOutlet]=\"column.cellTemplate\"\n            >\n            </ng-template>\n          </div>\n          <div *ngSwitchDefault>{{ element[column.name] }}</div>\n        </div>\n        <!-- edit cell -->\n        <div class=\"uxg-table-row-edit\" [ngClass]=\"{ 'uxg-cell-hidden': !element.uxgTableEdit }\">\n          <div [ngSwitch]=\"column.type\">\n            <div *ngSwitchCase=\"'cellTemplate'\">\n              <ng-template\n                [ngTemplateOutletContext]=\"{\n                  element: element,\n                  column: column,\n                  emiter: column.cellTemplateEmiter\n                }\"\n                [ngTemplateOutlet]=\"column.cellEditTemplate\"\n              >\n              </ng-template>\n            </div>\n            <div *ngSwitchDefault>\n              <input\n                matInput\n                [attr.aria-label]=\"'Input ' + element[column.name]\"\n                placeholder=\"{{ element[column.name] }}\"\n                (click)=\"$event.stopPropagation()\"\n                [(ngModel)]=\"element[column.name]\"\n              />\n            </div>\n          </div>\n        </div>\n      </td>\n      <td\n        mat-footer-cell\n        *matFooterCellDef\n        [ngClass]=\"{\n          left: column.align === 'left',\n          center: column.align === 'center',\n          right: column.align === 'right'\n        }\"\n      >\n        {{ getTotalRowCell(column) }}\n      </td>\n    </ng-container>\n    <ng-container matColumnDef=\"uxg-table-action-row\" *ngIf=\"enableEdit || enableDelete || enableSend\">\n      <th mat-header-cell *matHeaderCellDef class=\"uxg-table-action-column-header\">Actions</th>\n      <td mat-cell *matCellDef=\"let row\" class=\"uxg-table-action-column-cell\">\n        <button\n          *ngIf=\"!row.uxgTableEdit && enableEdit\"\n          mat-icon-button\n          (click)=\"rowEditClick(row); $event.stopPropagation()\"\n        >\n          <mat-icon class=\"material-icons-outlined\">edit_outline</mat-icon>\n        </button>\n        <button\n          *ngIf=\"!row.uxgTableEdit && enableDelete\"\n          mat-icon-button\n          (click)=\"rowDelete(row); $event.stopPropagation()\"\n        >\n          <mat-icon>delete_outline</mat-icon>\n        </button>\n        <button\n          *ngIf=\"!row.uxgTableEdit && enableSend\"\n          mat-icon-button\n          (click)=\"rowSendTriggered(row); $event.stopPropagation()\"\n        >\n          <mat-icon class=\"material-icons-outlined\">send_outline</mat-icon>\n        </button>\n        <button *ngIf=\"row.uxgTableEdit\" mat-icon-button (click)=\"rowEditConfirm(row); $event.stopPropagation()\">\n          <mat-icon>done</mat-icon>\n        </button>\n        <button *ngIf=\"row.uxgTableEdit\" mat-icon-button (click)=\"rowEditCancel(row); $event.stopPropagation()\">\n          <mat-icon class=\"material-icons-outlined\">cancel</mat-icon>\n        </button>\n      </td>\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <tr\n      mat-header-row\n      *matHeaderRowDef=\"columnsToDisplayToComponent; sticky: stickyHeader\"\n      [ngClass]=\"showTableHeader ? '' : 'uxg-table-no-header'\"\n    ></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: columnsToDisplayToComponent\"\n      (click)=\"singleSelectRowClick(row)\"\n      [ngClass]=\"[isRowSelected(row) ? 'selected' : '', row._class ? row._class : '']\"\n    ></tr>\n    <tr\n      mat-footer-row\n      *matFooterRowDef=\"columnsToDisplayToComponent; sticky: stickyFooter\"\n      [ngClass]=\"showTotalRows ? '' : 'hidden-total'\"\n    ></tr>\n  </table>\n</div>\n\n<mat-paginator\n  *ngIf=\"pageEnable\"\n  [disabled]=\"paging?.disabled\"\n  [length]=\"paging?.length\"\n  [hidePageSize]=\"paging?.hidePageSize\"\n  [pageIndex]=\"paging?.pageIndex\"\n  [pageSize]=\"paging?.pageSize\"\n  [pageSizeOptions]=\"paging?.pageSizeOptions\"\n  [showFirstLastButtons]=\"paging?.showFirstLastButtons\"\n  (page)=\"applyPageChanges($event)\"\n>\n</mat-paginator>\n","styles":["uxg-table{display:flex;flex:1;overflow:hidden;flex-direction:column;justify-content:space-between;height:100%}uxg-table .uxg-data-table{max-height:none;max-width:inherit;overflow:auto}uxg-table .mat-table{width:100%}uxg-table .mat-table tr td{position:relative;overflow:hidden;box-sizing:border-box}uxg-table .mat-table tr td .uxg-cell-hidden{display:none!important;width:0;height:0}uxg-table .mat-table tr td .uxg-table-row-display{position:absolute}uxg-table .mat-table tr td .uxg-table-row-edit{position:absolute;top:13%;bottom:13%;display:flex!important;align-items:center;overflow:hidden;justify-content:center;height:32px}uxg-table .mat-table tr td .uxg-table-row-edit.uxg-table-row-edit input{width:100%;height:24px}uxg-table .mat-table tr td.uxg-table-action-column-cell{text-align:center}uxg-table .mat-table tr td.left{text-align:left}uxg-table .mat-table tr td.right{text-align:right}uxg-table .mat-table tr td.center{text-align:center}uxg-table .mat-table tr td div{display:flex}uxg-table .mat-table tr td.right div{float:right;display:block}uxg-table .mat-table tr td.left div{float:left;display:block}uxg-table .mat-table tr td.center div{float:center;display:block}uxg-table .mat-table thead tr.uxg-table-no-header{display:none}uxg-table .mat-table thead tr th.uxg-table-action-column-header{text-align:center}uxg-table .mat-table thead tr th.right div{display:flex;flex-direction:row-reverse;place-content:center flex-start;align-items:center}uxg-table .mat-table thead tr th.right div .mat-sort-header-arrow{margin-left:0;margin-right:6px}uxg-table .mat-table thead tr th.left div{display:flex;place-content:center flex-start;align-items:center}uxg-table .mat-table thead tr th.center div{display:flex;place-content:center;align-items:center}uxg-table .mat-table tfoot .hidden-total{display:none}"]}]}],"members":{"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":34,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/table","name":"MatTable","line":34,"character":13},{"static":true}]}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"columnsToDisplay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"showTotalRows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"showTableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"totalData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"stickyHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"stickyFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"columnDragEnable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"selectedKeys":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"singleSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"multiSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"selectChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":103,"character":3}}]}],"multiSelectSingleRowClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":104,"character":3}}]}],"sortChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":105,"character":3}}]}],"pageEnable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":3}}]}],"paging":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"pageChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3}}]}],"enableEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":3}}]}],"enableDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}}]}],"enableSend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":3}}]}],"actionColumnPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":3}}]}],"rowRemoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":117,"character":3}}]}],"rowUpdated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":118,"character":3}}]}],"rowSend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":119,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"sortData":[{"__symbolic":"method"}],"singleSelectRowClick":[{"__symbolic":"method"}],"multiSelectRowClick":[{"__symbolic":"method"}],"multiSelectAllRows":[{"__symbolic":"method"}],"applyPageChanges":[{"__symbolic":"method"}],"getTotalRowCell":[{"__symbolic":"method"}],"emitSelectEvent":[{"__symbolic":"method"}],"emitClickEvent":[{"__symbolic":"method"}],"columnDragStarted":[{"__symbolic":"method"}],"columnDropped":[{"__symbolic":"method"}],"rowEditClick":[{"__symbolic":"method"}],"rowSendTriggered":[{"__symbolic":"method"}],"rowEditConfirm":[{"__symbolic":"method"}],"rowEditCancel":[{"__symbolic":"method"}],"rowDelete":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"applyDefaultPaging":[{"__symbolic":"method"}],"localSort":[{"__symbolic":"method"}],"getSortColumnType":[{"__symbolic":"method"}],"localPaging":[{"__symbolic":"method"}],"resetIndexWithMultiSelectRow":[{"__symbolic":"method"}],"resetActionRow":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"addOrUpdateActionColumnToColumnsToDisplay":[{"__symbolic":"method"}],"removeActionColumnsFromColumnsToDisplay":[{"__symbolic":"method"}]}},"UxgSort":{"__symbolic":"interface"},"UxgColumn":{"__symbolic":"interface"},"UxgColumnType":{"string":"string","number":"number","date":"date","typedouble":"typedouble","cellTemplate":"cellTemplate"},"UxgActionColumnPosition":{"start":"start","end":"end"},"UxgPage":{"__symbolic":"interface"},"UxgTableSelectEvent":{"__symbolic":"interface"},"UxgDefaultPaging":{"disabled":false,"pageIndex":0,"length":0,"hidePageSize":false,"pageSizeOptions":[5,10],"pageSize":5,"showFirstLastButtons":true}},"origins":{"UxgTableModule":"./src/table.module","TableComponent":"./src/table.component","UxgSort":"./src/table.models","UxgColumn":"./src/table.models","UxgColumnType":"./src/table.models","UxgActionColumnPosition":"./src/table.models","UxgPage":"./src/table.models","UxgTableSelectEvent":"./src/table.models","UxgDefaultPaging":"./src/table.models"},"importAs":"@ffdc/uxg-angular-components/table"}