@hmcts/ccpay-web-component 4.0.0-beta481 → 4.0.0-beta482

package/esm5/lib/components/table/table.component.js

@@ -44,16 +44,13 @@ var TableComponent = /** @class */ (function () {
                 return (r[user_full_name] = '', r);
             }), {});
             this.userLst = Object.keys(this.userLst);
-            this.userLst.sort((/**
-             * @param {?} a
-             * @param {?} b
-             * @return {?}
-             */
-            function (a, b) {
-                return a.localeCompare(b);
-            } //using String.prototype.localCompare()
-            ));
         }
+        this.userLst.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        function (a, b) { return a.toString().localeCompare(b); }));
     };
     /**
      * Set the paginator and sort after the view init since this component will
@@ -71,12 +68,12 @@ var TableComponent = /** @class */ (function () {
      */
     function () {
         this.dataSource.sort = this.sort;
-        /** @type {?} */
-        var sortState = { active: 'date_updated', direction: 'desc' };
-        this.sort.active = sortState.active;
-        this.sort.direction = sortState.direction;
-        this.sort.sortChange.emit(sortState);
+        //const sortState: Sort = {active: 'date_updated', direction: 'desc'};
+        // this.sort.active = sortState.active;
+        // this.sort.direction = sortState.direction;
+        // this.sort.sortChange.emit(sortState);
         this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
         this.cdRef.detectChanges();
     };
     /**
@@ -140,7 +137,7 @@ var TableComponent = /** @class */ (function () {
     TableComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-table',
-                    template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n<div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group\" style=\"float: right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option  *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container mat-elevation-z8\">\n\n  <mat-table [dataSource]=\"dataSource\" >\n\n    <ng-container matColumnDef=\"ccd_case_number\">\n      <mat-header-cell  *matHeaderCellDef >Case ID </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"refund_reference\">\n      <mat-header-cell  *matHeaderCellDef > Refund reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"reason\">\n      <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.reason}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"user_full_name\">\n      <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef > Date updated </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n        </ng-container>\n      \n        <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n        </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n    </mat-row>\n  </mat-table>\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
+                    template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n<div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group\" style=\"float: right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option  *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container mat-elevation-z8\">\n\n  <mat-table [dataSource]=\"dataSource\" matSort>\n\n    <ng-container matColumnDef=\"ccd_case_number\">\n      <mat-header-cell  *matHeaderCellDef >Case ID </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"refund_reference\">\n      <mat-header-cell  *matHeaderCellDef > Refund reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"reason\">\n      <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.reason}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"user_full_name\">\n      <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Date updated </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n        </ng-container>\n      \n        <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n        </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n    </mat-row>\n  </mat-table>\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
                     styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#005ea5;cursor:pointer;font-family:inherit}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}"]
                 }] }
     ];
@@ -201,4 +198,4 @@ if (false) {
      */
     TableComponent.prototype.OrderslistService;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGhtY3RzL2NjcGF5LXdlYi1jb21wb25lbnQvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy90YWJsZS90YWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUM3RSxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUM1RCxPQUFPLEVBQUMsT0FBTyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFaEQsT0FBTyxFQUFDLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTFELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBR3RFO0lBc0JFLHdCQUNVLG1CQUF3QyxFQUN4QyxLQUF3QixFQUN4QixpQkFBb0M7UUFGcEMsd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFxQjtRQUN4QyxVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUN4QixzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1COztRQWI5QyxxQkFBZ0IsR0FBRyxDQUFDLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLFFBQVEsRUFBRSxnQkFBZ0IsRUFBRSxjQUFjLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFjOUcsQ0FBQzs7OztJQUVKLGlDQUFROzs7SUFBUjtRQUNFLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztRQUN0QyxJQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxFQUFFLEtBQUssbUJBQW1CLEVBQUU7WUFDcEQsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7U0FDNUI7YUFBTTtZQUNKLElBQUksQ0FBQyxjQUFj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LGFBQWEsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNqRCxJQUFJLENBQUMsbUJBQW1CLENBQUMsUUFBUSxHQUFDLGtCQUFrQixDQUFDO1FBQ3JELElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxlQUFlLEdBQUcsVUFBVSxDQUFDLGVBQWUsQ0FBQztRQUN0RSxJQUFJLENBQUMsbUJBQW1CLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDO1FBQ25ELElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUM7SUFDdkQsQ0FBQzs7Z0JBcEZGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsOC9HQUFxQzs7aUJBRXRDOzs7O2dCQWJPLG1CQUFtQjtnQkFEVSxpQkFBaUI7Z0JBTzdDLGlCQUFpQjs7OzZCQVN2QixLQUFLLFNBQUMsWUFBWTt5QkFDbEIsS0FBSyxTQUFDLFFBQVE7K0JBQ2QsS0FBSyxTQUFDLGNBQWM7NEJBV3BCLFNBQVMsU0FBQyxZQUFZO3VCQUN0QixTQUFTLFNBQUMsT0FBTzs7SUFpRXBCLHFCQUFDO0NBQUEsQUFyRkQsSUFxRkM7U0FoRlksY0FBYzs7O0lBQ3pCLG9DQUF1Qzs7SUFDdkMsZ0NBQWdDOztJQUNoQyxzQ0FBNEM7O0lBQzVDLHdDQUF3Qjs7SUFHeEIsMENBQWlIOztJQUNqSCxvQ0FBb0M7O0lBQ3BDLGlDQUFROztJQUNSLHFDQUFvQjs7SUFDcEIsK0JBQWM7O0lBQ2Qsb0NBQTBCOztJQUUxQixtQ0FBaUQ7O0lBQ2pELDhCQUFrQzs7Ozs7SUFHaEMsNkNBQWdEOzs7OztJQUNoRCwrQkFBZ0M7Ozs7O0lBQ2hDLDJDQUE0QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBWaWV3Q2hpbGQsIElucHV0LCBDaGFuZ2VEZXRlY3RvclJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1BheW1lbnRMaWJDb21wb25lbnR9IGZyb20gJy4uLy4uL3BheW1lbnQtbGliLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNYXRUYWJsZURhdGFTb3VyY2V9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3RhYmxlJztcbmltcG9ydCB7TWF0U29ydCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NvcnQnO1xuaW1wb3J0IHtTb3J0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc29ydCc7XG5pbXBvcnQge01hdFBhZ2luYXRvciB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3BhZ2luYXRvcic7XG5pbXBvcnQgeyBJUmVmdW5kTGlzdCB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvSVJlZnVuZExpc3QnO1xuaW1wb3J0IHsgT3JkZXJzbGlzdFNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9vcmRlcnNsaXN0LnNlcnZpY2UnO1xuaW1wb3J0IHsgVEhJU19FWFBSIH0gZnJvbSAnQGFuZ3VsYXIvY29tcGlsZXIvc3JjL291dHB1dC9vdXRwdXRfYXN0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY2NwYXktdGFibGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFibGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YWJsZS5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgVGFibGVDb21wb25lbnQge1xuICBASW5wdXQoJ0RBVEFTT1VSQ0UnKSBEQVRBU09VUkNFOiBhbnlbXTtcbiAgQElucHV0KCdTVEFUVVMnKSBTVEFUVVM6IHN0cmluZztcbiAgQElucHV0KCdlcnJvck1lc3NhZ2UnKSBlcnJvck1lc3NhZ2U6IHN0cmluZztcbiAgaXNBcHByb3ZhbEZsb3c6IGJvb2xlYW47XG4gIFxuICAvLyBkaXNwbGF5ZWRDb2x1bW5zID0gWydjY2RDYXNlTnVtYmVyJywgJ3JlZnVuZFJlZmVyZW5jZScsICdyZWFzb24nLCAnY3JlYXRlQnknLCAndXBkYXRlRGF0ZScsICdBY3Rpb24nXTtcbiAgZGlzcGxheWVkQ29sdW1ucyA9IFsnY2NkX2Nhc2VfbnVtYmVyJywgJ3JlZnVuZF9yZWZlcmVuY2UnLCAncmVhc29uJywgJ3VzZXJfZnVsbF9uYW1lJywgJ2RhdGVfdXBkYXRlZCcsICdBY3Rpb24nXTtcbiAgZGF0YVNvdXJjZTogTWF0VGFibGVEYXRhU291cmNlPGFueT47XG4gIHVzZXJMc3Q7XG4gIGFjdHVhbGNvdW50OiBudW1iZXI7XG4gIGNvdW50OiBudW1iZXI7XG4gIHJlZnVuZExpc3Q6IElSZWZ1bmRMaXN0W107XG5cbiAgQFZpZXdDaGlsZChNYXRQYWdpbmF0b3IpIHBhZ2luYXRvcjogTWF0UGFnaW5hdG9yO1xuICBAVmlld0NoaWxkKE1hdFNvcnQpIHNvcnQ6IE1hdFNvcnQ7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBwYXltZW50TGliQ29tcG9uZW50OiBQYXltZW50TGliQ29tcG9uZW50LFxuICAgIHByaXZhdGUgY2RSZWY6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIHByaXZhdGUgT3JkZXJzbGlzdFNlcnZpY2U6IE9yZGVyc2xpc3RTZXJ2aWNlXG4gICkge31cblxuICBuZ09uSW5pdCgpIHsgXG4gICAgdGhpcy5lcnJvck1lc3NhZ2UgPSB0aGlzLmVycm9yTWVzc2FnZTtcbiAgICBpZih0aGlzLlNUQVRVUy50b0xvd2VyQ2FzZSgpID09PSAnc2VudCBmb3IgYXBwcm92YWwnKSB7XG4gICAgICB0aGlzLmlzQXBwcm92YWxGbG93ID0gdHJ1ZTtcbiAgICB9IGVsc2Uge1xuICAgICAgIHRoaXMuaXNBcHByb3ZhbEZsb3cgPSBmYWxzZTtcbiAgICB9XG4gICAgdGhpcy5yZWZ1bmRMaXN0ID0gdGhpcy5EQVRBU09VUkNFO1xuICAgIHRoaXMuZGF0YVNvdXJjZSA9IG5ldyBNYXRUYWJsZURhdGFTb3VyY2UodGhpcy5yZWZ1bmRMaXN0KTtcbiAgICB0aGlzLmFjdHVhbGNvdW50ID0gdGhpcy5kYXRhU291cmNlLmRhdGEubGVuZ3RoO1xuICAgIGlmKCB0aGlzLnJlZnVuZExpc3QgIT09IHVuZGVmaW5lZCkge1xuICAgIHRoaXMudXNlckxzdCA9IHRoaXMucmVmdW5kTGlzdC5yZWR1Y2UoKHIse3VzZXJfZnVsbF9uYW1lfSkgPT4gKHJbdXNlcl9mdWxsX25hbWVdPScnLCByKSAsIHt9KTtcbiAgICAgdGhpcy51c2VyTHN0ID0gT2JqZWN0LmtleXModGhpcy51c2VyTHN0KTtcbiAgICAgdGhpcy51c2VyTHN0LnNvcnQoKGEsIGIpID0+XG4gICBhLmxvY2FsZUNvbXBhcmUoYikvL3VzaW5nIFN0cmluZy5wcm90b3R5cGUubG9jYWxDb21wYXJlKClcbik7ICB9XG4gIH1cbiAgLyoqXG4gICAqIFNldCB0aGUgcGFnaW5hdG9yIGFuZCBzb3J0IGFmdGVyIHRoZSB2aWV3IGluaXQgc2luY2UgdGhpcyBjb21wb25lbnQgd2lsbFxuICAgKiBiZSBhYmxlIHRvIHF1ZXJ5IGl0cyB2aWV3IGZvciB0aGUgaW5pdGlhbGl6ZWQgcGFnaW5hdG9yIGFuZCBzb3J0LlxuICAgKi9cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgXG4gICAgdGhpcy5kYXRhU291cmNlLnNvcnQgPSB0aGlzLnNvcnQ7XG5cbiAgICBjb25zdCBzb3J0U3RhdGU6IFNvcnQgPSB7YWN0aXZlOiAnZGF0ZV91cGRhdGVkJywgZGlyZWN0aW9uOiAnZGVzYyd9O1xuICAgIHRoaXMuc29ydC5hY3RpdmUgPSBzb3J0U3RhdGUuYWN0aXZlO1xuICAgIHRoaXMuc29ydC5kaXJlY3Rpb24gPSBzb3J0U3RhdGUuZGlyZWN0aW9uO1xuICAgIHRoaXMuc29ydC5zb3J0Q2hhbmdlLmVtaXQoc29ydFN0YXRlKTtcbiAgICB0aGlzLmRhdGFTb3VyY2UucGFnaW5hdG9yID0gdGhpcy5wYWdpbmF0b3I7XG4gICAgdGhpcy5jZFJlZi5kZXRlY3RDaGFuZ2VzKCk7XG4gIH1cblxuICBhcHBseUZpbHRlcihmaWx0ZXJWYWx1ZTogc3RyaW5nKSB7XG4gICAgZmlsdGVyVmFsdWUgPSBmaWx0ZXJWYWx1ZS50cmltKCk7IC8vIFJlbW92ZSB3aGl0ZXNwYWNlXG4gICAgZmlsdGVyVmFsdWUgPSBmaWx0ZXJWYWx1ZS50b0xvd2VyQ2FzZSgpOyAvLyBEYXRhc291cmNlIGRlZmF1bHRzIHRvIGxvd2VyY2FzZSBtYXRjaGVzXG4gICAgdGhpcy5kYXRhU291cmNlLmZpbHRlciA9IGZpbHRlclZhbHVlO1xuICB9XG5cbiAgc2VsZWN0Y2hhbmdlKGFyZ3MpeyBcbiAgICB0aGlzLmRhdGFTb3VyY2UuZmlsdGVyID0gYXJncy50YXJnZXQudmFsdWU7XG4gICAgdGhpcy5hY3R1YWxjb3VudCA9IHRoaXMuZGF0YVNvdXJjZS5kYXRhLmxlbmd0aDtcbiAgICB0aGlzLmRhdGFTb3VyY2UucGFnaW5hdG9yID0gdGhpcy5wYWdpbmF0b3I7XG4gIH0gXG4gIGdvVG9SZWZ1bmRQcm9jZXNzQ29tcG9uZW50KHJlZnVuZFJlZmVyZW5jZTogc3RyaW5nLCByZWZ1bmREYXRlOiBJUmVmdW5kTGlzdCApIHtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQucmVmdW5kbGlzdHNvdXJjZSA9IHJlZnVuZERhdGU7XG4gICAgdGhpcy5wYXltZW50TGliQ29tcG9uZW50LnJlZnVuZFJlZmVyZW5jZSA9IHJlZnVuZFJlZmVyZW5jZTtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQudmlld05hbWUgPSAncHJvY2Vzcy1yZWZ1bmQnO1xuICB9XG5cbiAgZ29Ub1JlZnVuZFZpZXdDb21wb25lbnQocmVmdW5kUmVmZXJlbmNlOiBzdHJpbmcsIHJlZnVuZERhdGE6IElSZWZ1bmRMaXN0ICkge1xuICAgIHRoaXMuT3JkZXJzbGlzdFNlcnZpY2Uuc2V0UmVmdW5kVmlldyhyZWZ1bmREYXRhKTtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQudmlld05hbWU9J3JlZnVuZHN0YXR1c2xpc3QnO1xuICAgIHRoaXMucGF5bWVudExpYkNvbXBvbmVudC5DQ0RfQ0FTRV9OVU1CRVIgPSByZWZ1bmREYXRhLmNjZF9jYXNlX251bWJlcjtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQuaXNSZWZ1bmRTdGF0dXNWaWV3ID0gdHJ1ZTtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQuaXNDYWxsRnJvbVJlZnVuZExpc3QgPSB0cnVlO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGhtY3RzL2NjcGF5LXdlYi1jb21wb25lbnQvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy90YWJsZS90YWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUM3RSxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUM1RCxPQUFPLEVBQUMsT0FBTyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFaEQsT0FBTyxFQUFDLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTFELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBRXRFO0lBb0JFLHdCQUNVLG1CQUF3QyxFQUN4QyxLQUF3QixFQUN4QixpQkFBb0M7UUFGcEMsd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFxQjtRQUN4QyxVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUN4QixzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1COztRQVo5QyxxQkFBZ0IsR0FBRyxDQUFDLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLFFBQVEsRUFBRSxnQkFBZ0IsRUFBRSxjQUFjLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFhOUcsQ0FBQzs7OztJQUNKLGlDQUFROzs7SUFBUjtRQUNFLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztRQUN0QyxJQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxFQUFFLEtBQUssbUJBQW1CLEVBQUU7WUFDcEQsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7U0FDNUI7YUFBTTtZQUNKLElBQUksQ0FBQyxjQUFj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QWUsQ0FBQztRQUN0RSxJQUFJLENBQUMsbUJBQW1CLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDO1FBQ25ELElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUM7SUFDdkQsQ0FBQzs7Z0JBOUVGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsb2hIQUFxQzs7aUJBRXRDOzs7O2dCQVpPLG1CQUFtQjtnQkFEVSxpQkFBaUI7Z0JBTzdDLGlCQUFpQjs7OzZCQVF2QixLQUFLLFNBQUMsWUFBWTt5QkFDbEIsS0FBSyxTQUFDLFFBQVE7K0JBQ2QsS0FBSyxTQUFDLGNBQWM7NEJBVXBCLFNBQVMsU0FBQyxZQUFZO3VCQUN0QixTQUFTLFNBQUMsT0FBTzs7SUE0RHBCLHFCQUFDO0NBQUEsQUEvRUQsSUErRUM7U0ExRVksY0FBYzs7O0lBQ3pCLG9DQUF1Qzs7SUFDdkMsZ0NBQWdDOztJQUNoQyxzQ0FBNEM7O0lBQzVDLHdDQUF3Qjs7SUFFeEIsMENBQWlIOztJQUVqSCxvQ0FBb0M7O0lBQ3BDLGlDQUFROztJQUNSLHFDQUFvQjs7SUFDcEIsK0JBQWM7O0lBQ2Qsb0NBQTBCOztJQUMxQixtQ0FBaUQ7O0lBQ2pELDhCQUFrQzs7Ozs7SUFFaEMsNkNBQWdEOzs7OztJQUNoRCwrQkFBZ0M7Ozs7O0lBQ2hDLDJDQUE0QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBWaWV3Q2hpbGQsIElucHV0LCBDaGFuZ2VEZXRlY3RvclJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1BheW1lbnRMaWJDb21wb25lbnR9IGZyb20gJy4uLy4uL3BheW1lbnQtbGliLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBNYXRUYWJsZURhdGFTb3VyY2V9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3RhYmxlJztcbmltcG9ydCB7TWF0U29ydCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NvcnQnO1xuaW1wb3J0IHtTb3J0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc29ydCc7XG5pbXBvcnQge01hdFBhZ2luYXRvciB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3BhZ2luYXRvcic7XG5pbXBvcnQgeyBJUmVmdW5kTGlzdCB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvSVJlZnVuZExpc3QnO1xuaW1wb3J0IHsgT3JkZXJzbGlzdFNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9vcmRlcnNsaXN0LnNlcnZpY2UnO1xuaW1wb3J0IHsgVEhJU19FWFBSIH0gZnJvbSAnQGFuZ3VsYXIvY29tcGlsZXIvc3JjL291dHB1dC9vdXRwdXRfYXN0JztcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NjcGF5LXRhYmxlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYmxlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFibGUuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIFRhYmxlQ29tcG9uZW50IHtcbiAgQElucHV0KCdEQVRBU09VUkNFJykgREFUQVNPVVJDRTogYW55W107XG4gIEBJbnB1dCgnU1RBVFVTJykgU1RBVFVTOiBzdHJpbmc7XG4gIEBJbnB1dCgnZXJyb3JNZXNzYWdlJykgZXJyb3JNZXNzYWdlOiBzdHJpbmc7XG4gIGlzQXBwcm92YWxGbG93OiBib29sZWFuO1xuICAvLyBkaXNwbGF5ZWRDb2x1bW5zID0gWydjY2RDYXNlTnVtYmVyJywgJ3JlZnVuZFJlZmVyZW5jZScsICdyZWFzb24nLCAnY3JlYXRlQnknLCAndXBkYXRlRGF0ZScsICdBY3Rpb24nXTtcbiAgZGlzcGxheWVkQ29sdW1ucyA9IFsnY2NkX2Nhc2VfbnVtYmVyJywgJ3JlZnVuZF9yZWZlcmVuY2UnLCAncmVhc29uJywgJ3VzZXJfZnVsbF9uYW1lJywgJ2RhdGVfdXBkYXRlZCcsICdBY3Rpb24nXTtcbiAgXG4gIGRhdGFTb3VyY2U6IE1hdFRhYmxlRGF0YVNvdXJjZTxhbnk+O1xuICB1c2VyTHN0O1xuICBhY3R1YWxjb3VudDogbnVtYmVyO1xuICBjb3VudDogbnVtYmVyO1xuICByZWZ1bmRMaXN0OiBJUmVmdW5kTGlzdFtdO1xuICBAVmlld0NoaWxkKE1hdFBhZ2luYXRvcikgcGFnaW5hdG9yOiBNYXRQYWdpbmF0b3I7XG4gIEBWaWV3Q2hpbGQoTWF0U29ydCkgc29ydDogTWF0U29ydDtcbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBwYXltZW50TGliQ29tcG9uZW50OiBQYXltZW50TGliQ29tcG9uZW50LFxuICAgIHByaXZhdGUgY2RSZWY6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIHByaXZhdGUgT3JkZXJzbGlzdFNlcnZpY2U6IE9yZGVyc2xpc3RTZXJ2aWNlXG4gICkge31cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5lcnJvck1lc3NhZ2UgPSB0aGlzLmVycm9yTWVzc2FnZTtcbiAgICBpZih0aGlzLlNUQVRVUy50b0xvd2VyQ2FzZSgpID09PSAnc2VudCBmb3IgYXBwcm92YWwnKSB7XG4gICAgICB0aGlzLmlzQXBwcm92YWxGbG93ID0gdHJ1ZTtcbiAgICB9IGVsc2Uge1xuICAgICAgIHRoaXMuaXNBcHByb3ZhbEZsb3cgPSBmYWxzZTtcbiAgICB9XG4gICAgdGhpcy5yZWZ1bmRMaXN0ID0gdGhpcy5EQVRBU09VUkNFO1xuICAgIHRoaXMuZGF0YVNvdXJjZSA9IG5ldyBNYXRUYWJsZURhdGFTb3VyY2UodGhpcy5yZWZ1bmRMaXN0KTtcbiAgICB0aGlzLmFjdHVhbGNvdW50ID0gdGhpcy5kYXRhU291cmNlLmRhdGEubGVuZ3RoO1xuICAgIGlmKCB0aGlzLnJlZnVuZExpc3QgIT09IHVuZGVmaW5lZCkge1xuICAgIHRoaXMudXNlckxzdCA9IHRoaXMucmVmdW5kTGlzdC5yZWR1Y2UoKHIse3VzZXJfZnVsbF9uYW1lfSkgPT4gKHJbdXNlcl9mdWxsX25hbWVdPScnLCByKSAsIHt9KTtcbiAgICAgdGhpcy51c2VyTHN0ID0gT2JqZWN0LmtleXModGhpcy51c2VyTHN0KTtcbiAgICB9XG4gICAgdGhpcy51c2VyTHN0LnNvcnQoKGEsIGIpID0+IGEudG9TdHJpbmcoKS5sb2NhbGVDb21wYXJlKGIpKTtcbiAgfVxuICAvKipcbiAgICogU2V0IHRoZSBwYWdpbmF0b3IgYW5kIHNvcnQgYWZ0ZXIgdGhlIHZpZXcgaW5pdCBzaW5jZSB0aGlzIGNvbXBvbmVudCB3aWxsXG4gICAqIGJlIGFibGUgdG8gcXVlcnkgaXRzIHZpZXcgZm9yIHRoZSBpbml0aWFsaXplZCBwYWdpbmF0b3IgYW5kIHNvcnQuXG4gICAqL1xuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgXG4gICAgdGhpcy5kYXRhU291cmNlLnNvcnQgPSB0aGlzLnNvcnQ7XG5cbiAgICAvL2NvbnN0IHNvcnRTdGF0ZTogU29ydCA9IHthY3RpdmU6ICdkYXRlX3VwZGF0ZWQnLCBkaXJlY3Rpb246ICdkZXNjJ307XG4gICAgLy8gdGhpcy5zb3J0LmFjdGl2ZSA9IHNvcnRTdGF0ZS5hY3RpdmU7XG4gICAgLy8gdGhpcy5zb3J0LmRpcmVjdGlvbiA9IHNvcnRTdGF0ZS5kaXJlY3Rpb247XG4gICAgLy8gdGhpcy5zb3J0LnNvcnRDaGFuZ2UuZW1pdChzb3J0U3RhdGUpO1xuICAgIHRoaXMuZGF0YVNvdXJjZS5wYWdpbmF0b3IgPSB0aGlzLnBhZ2luYXRvcjtcbiAgICB0aGlzLmRhdGFTb3VyY2Uuc29ydCA9IHRoaXMuc29ydDtcbiAgICB0aGlzLmNkUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgfVxuICBhcHBseUZpbHRlcihmaWx0ZXJWYWx1ZTogc3RyaW5nKSB7XG4gICAgZmlsdGVyVmFsdWUgPSBmaWx0ZXJWYWx1ZS50cmltKCk7IC8vIFJlbW92ZSB3aGl0ZXNwYWNlXG4gICAgZmlsdGVyVmFsdWUgPSBmaWx0ZXJWYWx1ZS50b0xvd2VyQ2FzZSgpOyAvLyBEYXRhc291cmNlIGRlZmF1bHRzIHRvIGxvd2VyY2FzZSBtYXRjaGVzXG4gICAgdGhpcy5kYXRhU291cmNlLmZpbHRlciA9IGZpbHRlclZhbHVlO1xuICB9XG4gIHNlbGVjdGNoYW5nZShhcmdzKXtcbiAgICB0aGlzLmRhdGFTb3VyY2UuZmlsdGVyID0gYXJncy50YXJnZXQudmFsdWU7XG4gICAgdGhpcy5hY3R1YWxjb3VudCA9IHRoaXMuZGF0YVNvdXJjZS5kYXRhLmxlbmd0aDtcbiAgICB0aGlzLmRhdGFTb3VyY2UucGFnaW5hdG9yID0gdGhpcy5wYWdpbmF0b3I7XG4gIH1cbiAgZ29Ub1JlZnVuZFByb2Nlc3NDb21wb25lbnQocmVmdW5kUmVmZXJlbmNlOiBzdHJpbmcsIHJlZnVuZERhdGU6IElSZWZ1bmRMaXN0ICkge1xuICAgIHRoaXMucGF5bWVudExpYkNvbXBvbmVudC5yZWZ1bmRsaXN0c291cmNlID0gcmVmdW5kRGF0ZTtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQucmVmdW5kUmVmZXJlbmNlID0gcmVmdW5kUmVmZXJlbmNlO1xuICAgIHRoaXMucGF5bWVudExpYkNvbXBvbmVudC52aWV3TmFtZSA9ICdwcm9jZXNzLXJlZnVuZCc7XG4gIH1cbiAgZ29Ub1JlZnVuZFZpZXdDb21wb25lbnQocmVmdW5kUmVmZXJlbmNlOiBzdHJpbmcsIHJlZnVuZERhdGE6IElSZWZ1bmRMaXN0ICkge1xuICAgIHRoaXMuT3JkZXJzbGlzdFNlcnZpY2Uuc2V0UmVmdW5kVmlldyhyZWZ1bmREYXRhKTtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQudmlld05hbWU9J3JlZnVuZHN0YXR1c2xpc3QnO1xuICAgIHRoaXMucGF5bWVudExpYkNvbXBvbmVudC5DQ0RfQ0FTRV9OVU1CRVIgPSByZWZ1bmREYXRhLmNjZF9jYXNlX251bWJlcjtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQuaXNSZWZ1bmRTdGF0dXNWaWV3ID0gdHJ1ZTtcbiAgICB0aGlzLnBheW1lbnRMaWJDb21wb25lbnQuaXNDYWxsRnJvbVJlZnVuZExpc3QgPSB0cnVlO1xuICB9XG59Il19

package/fesm2015/hmcts-ccpay-web-component.js

@@ -5487,12 +5487,23 @@ class AddRemissionComponent {
                  * @return {?}
                  */
                 (data) => data.recently_used === false));
+                this.refundReasons = this.refundReasons.filter((/**
+                 * @param {?} data
+                 * @return {?}
+                 */
+                (data) => data.name !== 'Retrospective remission'));
                 this.cd.detectChanges();
                 this.commonRefundReasons = refundReasons['data'].filter((/**
                  * @param {?} data
                  * @return {?}
                  */
                 (data) => data.recently_used === true));
+                this.commonRefundReasons.sort((/**
+                 * @param {?} a
+                 * @param {?} b
+                 * @return {?}
+                 */
+                (a, b) => a.toString().localeCompare(b)));
                 this.cd.detectChanges();
             }));
         }
@@ -6175,7 +6186,7 @@ class AddRemissionComponent {
 AddRemissionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-add-remission',
-                template: "<div class=\"add-remission\">\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n      <h1 class=\"heading-large\">Add remission </h1>\n      <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  Add remission to {{ fee?.code }}: {{ fee?.description }}\n                <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C</span>\n              </label>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n              </p>\n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n                How much does the applicant need to pay?\n              </label>\n\n              <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                <div class=\"hmcts-currency-input\">\n                <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                  <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                  <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                  <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n                </p>\n              </div>\n            </div>\n          </form>\n          <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n              Submit\n            </button>\n        </div>\n      </form>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n          <span class=\"govuk-warning-text__assistive\">Warning</span>\n          Are you sure you want to add remission to this fee?\n        </strong>\n      </div>\n      <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n            <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n            <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n        </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n        Cancel\n      </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"confirmRemission()\">\n        Confirm\n      </button>\n\n  </ng-container>\n\n  <!-- Add retro remission changes-->\n\n  <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n      <form novalidate>\n          <div class=\"govuk-form-group\">\n            <form [formGroup]=\"remissionForm\" novalidate>\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  <span class=\"form-hint\">For example: HWF-A1B-23C</span>\n                </label>\n                <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n                <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                  <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                  <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n                </p>\n              </div>\n            \n            </form>\n            <div class=\"govuk-button-group\">\n                <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n              <p><a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n            </div>\n          </div>\n      </form>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                      <fieldset class=\"govuk-fieldset\">\n                        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                            <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the remission amount\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                                Enter the  amount\n                            </h1> \n                          </legend>\n                       <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                          <div class=\"hmcts-currency-input\">\n                              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                              <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                              <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                                <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                                <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                                <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n                              </p>\n              \n                        </div>\n                      </fieldset>\n                  </form>\n            \n                  <div class=\"govuk-button-group\">\n                      <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                      <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n                    <p>\n                        <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                    </p>\n                  </div>\n              </div>\n    \n          </form>\n      </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n              <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Help with fees or remission reference</td>\n              <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n               <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n              <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                  <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n      <p> <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Remission added\n          </h1>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n              <p class=\"govuk-body\" style=\"color: white\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n             \n            </div>\n          </div>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" >\n              <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </button>\n            </div>\n        <p class=\"govuk-body\">\n          <a (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n      <div class=\"govuk-grid-row\">\n        <div >\n          <div class=\"govuk-panel govuk-panel--confirmation\">\n            <h1 class=\"govuk-panel__title\">\n              Refund submitted\n            </h1>\n            \n            <div class=\"govuk-panel__body\">\n              <p class=\"govuk-body\" style=\"color: white\"><strong>Refund reference: {{refundReference}}</strong></p>\n            </div>\n      \n          </div>\n          <div *ngIf=\"isPaymentSuccess\">\n          <h2 class=\"govuk-heading-l\">What happens next</h2>\n          <p class=\"govuk-body\">\n            A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n          </p>\n        </div>\n          <p class=\"govuk-body\">\n            <a (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</a>\n         </p>\n        </div>\n      </div>\n    \n  </ng-container>\n\n  <!-- Issue Refund Section -->\n\n  <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n      <h1 class=\"heading-large\">Process refund</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <h1 class=\"heading-large\">Why are you making this refund?\n        </h1>\n       \n\n        <div class=\"govuk-form-group\">\n            <form novalidate>\n                <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                    <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n                       \n                          <div\n                            [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n                            data-module=\"govuk-radios\" >\n                            <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n                              <span *ngIf=\"refundHasError\">Select a reason why you\u2019re making this refund</span>\n                            </p>\n\n                           \n\n                            <div class = \"container-fluid\">\n                              <div class=\"row\">\n                              <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n                                  <input   class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n                                  formControlName=\"refundReason\" value={{refund.code}}\n                                    (change)=\"selectRadioButton(refund.name, refund.name)\">\n                                  <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                    {{refund.name}}\n                                  </label>\n\n                                  <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                      <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                          Enter reason\n                                      </label>\n                                      <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                          <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                        </p>\n                                    <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                  \n                                  </div>\n                              </div>\n                              </div>\n                            </div>\n                            <br/>\n                            <div>\n                                <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                  <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                  <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                    <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                  </select>\n                              \n                            </div>\n                                <br/>\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                    <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                        Enter reason\n                                    </label>\n                                    <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                      </p>\n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                \n                                </div>\n\n                           \n                          </div>\n                    </fieldset>\n                  </form>\n               </div>\n               </form>\n        </div>\n        <div class=\"govuk-button-group\">\n            <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n            <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n          <p>\n              <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n                  Cancel\n              </a>\n          </p>\n        </div>\n      \n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> {{ selectedRefundReason }}\n               <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund()\">\n        Submit refund\n      </button>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <!--Retro Refund-->\n  <ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> Retrospective remission </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td class=\"govuk-table__cell\">{{this.remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n              <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n              <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"processRefund()\">\n        Submit refund\n      </button>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Refund submitted\n          </h1>\n          \n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body\" style=\"color: white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n    \n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n        </p>\n      </div>\n        <p class=\"govuk-body\">\n          <a (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\n  </ng-container>\n\n</div>\n\n\n\n",
+                template: "<div class=\"add-remission\">\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Error in processing the request\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"viewStatus === 'main' && !isRefundRemission \">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSION'>\n      <h1 class=\"heading-large\">Add remission </h1>\n      <form novalidate>\n        <div class=\"govuk-form-group\">\n          <form [formGroup]=\"remissionForm\" novalidate>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  Add remission to {{ fee?.code }}: {{ fee?.description }}\n                <span class=\"form-hint\">Enter remission for reference. For example: HWF-A1B-23C</span>\n              </label>\n              <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n              <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n              </p>\n            </div>\n            <div class=\"govuk-form-group\">\n              <label class=\"govuk-label govuk-label--s\" for=\"amount\">\n                How much does the applicant need to pay?\n              </label>\n\n              <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                <div class=\"hmcts-currency-input\">\n                <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\" type=\"text\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                  <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                  <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                  <span *ngIf=\"isRemissionLessThanFeeError\">The remission amount must be less than the total fee</span>\n                </p>\n              </div>\n            </div>\n          </form>\n          <button class=\"button\" type=\"submit\" (click)=\"addRemission()\">\n              Submit\n            </button>\n        </div>\n      </form>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'confirmation'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n        <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n        <strong class=\"govuk-warning-text__text\">\n          <span class=\"govuk-warning-text__assistive\">Warning</span>\n          Are you sure you want to add remission to this fee?\n        </strong>\n      </div>\n      <table class=\"govuk-table\">\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission code:</td>\n            <td class=\"govuk-table__cell\">{{ remissionForm.controls.remissionCode.value }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code:</td>\n            <td class=\"govuk-table__cell\">{{ fee.code }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee description:</td>\n            <td class=\"govuk-table__cell\">{{ fee.description }}</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n            <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Amount the applicant must pay:</td>\n            <td class=\"govuk-table__cell\">{{  remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}</td>\n        </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"cancelRemission.emit()\">\n        Cancel\n      </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"confirmRemission()\">\n        Confirm\n      </button>\n\n  </ng-container>\n\n  <!-- Add retro remission changes-->\n\n  <ng-container *ngIf=\"viewCompStatus === 'addremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSADDRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <h1 class=\"heading-large\">Enter help with fees or remission reference</h1>\n      <form novalidate>\n          <div class=\"govuk-form-group\">\n            <form [formGroup]=\"remissionForm\" novalidate>\n              <div class=\"govuk-form-group\">\n                <label class=\"govuk-label govuk-label--s\" for=\"remission-code\">\n                  <span class=\"form-hint\">For example: HWF-A1B-23C</span>\n                </label>\n                <input [ngClass]=\"{'inline-error-class': isRemissionCodeEmpty || remissionCodeHasError}\" class=\"govuk-input govuk-input--width-20 govuk-!-margin-right-1\" id=\"remissionCode\" aria-label=\"remissionCode\"  name=\"remissionCode\" type=\"text\" formControlName=\"remissionCode\">\n                <p class=\"inline-error-message\" *ngIf=\"isRemissionCodeEmpty || remissionCodeHasError\">\n                  <span *ngIf=\"isRemissionCodeEmpty\">Enter a remission code</span>\n                  <span *ngIf=\"remissionCodeHasError\">Enter a vaild remission code</span>\n                </p>\n              </div>\n            \n            </form>\n            <div class=\"govuk-button-group\">\n                <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                <button (click)=\"addRemissionCode()\" class=\"govuk-button\"> Continue</button>\n              <p><a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a></p>\n            </div>\n          </div>\n      </form>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'processretroremissonpage'\" >\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PROCESSRETROREMISSIONPAGE'> \n      <h1 class=\"heading-large\">Process remission</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <div class=\"govuk-form-group\">\n          <form novalidate>\n              <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                      <fieldset class=\"govuk-fieldset\">\n                        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\"> \n                            <h1 *ngIf=\"remessionPayment?.status === 'Success' ||   isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the amount to be refunded\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status !== 'Success' && !isFromRefundListPage\" class=\"heading-medium\">\n                                Enter the remission amount\n                            </h1> \n                            <h1 *ngIf=\"remessionPayment?.status === 'undefined'\" class=\"heading-medium\">\n                                Enter the  amount\n                            </h1> \n                          </legend>\n                       <div id=\"amount-currency\" class=\"govuk-visually-hidden\">in pounds</div>\n                          <div class=\"hmcts-currency-input\">\n                              <div class=\"hmcts-currency-input__symbol\" aria-hidden=\"true\">\u00A3</div>\n                              <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isAmountEmpty || amountHasError || isRemissionLessThanFeeError}\" id=\"amount\" aria-label=\"amount\"  name=\"amount\"  type=\"number\" aria-describedby=\"amount-currency\" formControlName=\"amount\">\n                              <p class=\"inline-error-message\" *ngIf=\"isAmountEmpty || amountHasError || isRemissionLessThanFeeError\">\n                                <span *ngIf=\"isAmountEmpty\">Enter a amount</span>\n                                <span *ngIf=\"amountHasError\">Enter a vaild amount</span>\n                                <span *ngIf=\"isRemissionLessThanFeeError\">You cannot add a remission that's more than the fee amount.</span>\n                              </p>\n              \n                        </div>\n                      </fieldset>\n                  </form>\n            \n                  <div class=\"govuk-button-group\">\n                      <button (click)=\"gotoAddRetroRemissionCodePage()\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n                      <button (click)=\"gotoCheckRetroRemissionPage(payment)\" class=\"govuk-button\"> Continue</button>\n                    <p>\n                        <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">Cancel</a>\n                    </p>\n                  </div>\n              </div>\n    \n          </form>\n      </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkretroremissionpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKRETROREMISSIONCONFIRMATION'> \n      <div class=\"govuk-warning-text\">\n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.reference: ' '}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">\u00A3{{ remessionPayment ? getFormattedCurrency(remessionPayment.amount): ' ' | currency :'GBP':'symbol':'1.2-2'}} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment status</td>\n              <td class=\"govuk-table__cell\">{{remessionPayment ? remessionPayment.status: ''}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee</td>\n              <td class=\"govuk-table__cell\">{{ fee.code }} - {{ fee.description }} </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Help with fees or remission reference</td>\n              <td class=\"govuk-table__cell\"> {{ remissionForm.controls.remissionCode.value }}\n               <a (click)=\"gotoProcessRetroRemissionPage()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td *ngIf=\"remessionPayment.status !== 'Success'\" class=\"govuk-table__cell govuk-!-font-weight-bold\">Remission amount</td>\n              <td class=\"govuk-table__cell\">{{remissionForm.controls.amount.value  | currency:'GBP':'symbol-narrow':'1.2-2' }}\n                  <a (click)=\"addRemissionCode()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"addRemissionCode()\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isConfirmationBtnDisabled\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"confirmRetroRemission()\"> Add remission </button>\n      <p> <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\"> Cancel</a> </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retroremissionconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONCONFIRMATIONPAGE'> \n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Remission added\n          </h1>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" class=\"govuk-panel__body\">\n              <p class=\"govuk-body\" style=\"color: white\"><strong>The amount to be refunded should be {{remissionForm.controls.amount.value | currency:'GBP':'symbol-narrow':'1.2-2' }}</strong></p>\n             \n            </div>\n          </div>\n          <div *ngIf=\"remessionPayment.status === 'Success'\" >\n              <button type=\"submit\" [disabled]=\"!isRemissionApplied\" [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"' (click)=\"processRefund()\">Submit refund </button>\n            </div>\n        <p class=\"govuk-body\">\n          <a (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'refundconfirmationpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='RETROREMISSIONREFUNDCONFIRMATIONPAGE'> \n      <div class=\"govuk-grid-row\">\n        <div >\n          <div class=\"govuk-panel govuk-panel--confirmation\">\n            <h1 class=\"govuk-panel__title\">\n              Refund submitted\n            </h1>\n            \n            <div class=\"govuk-panel__body\">\n              <p class=\"govuk-body\" style=\"color: white\"><strong>Refund reference: {{refundReference}}</strong></p>\n            </div>\n      \n          </div>\n          <div *ngIf=\"isPaymentSuccess\">\n          <h2 class=\"govuk-heading-l\">What happens next</h2>\n          <p class=\"govuk-body\">\n            A refund request for {{refundAmount  | currency:'GBP':'symbol-narrow':'1.2-2' }} has been created and will be passed to a team leader to approve.\n          </p>\n        </div>\n          <p class=\"govuk-body\">\n            <a (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</a>\n         </p>\n        </div>\n      </div>\n    \n  </ng-container>\n\n  <!-- Issue Refund Section -->\n\n  <ng-container *ngIf=\"viewCompStatus === 'issuerefund' && isRefundRemission\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ISSUEREFUNDPAGE'> \n      <h1 class=\"heading-large\">Process refund</h1>\n      <h1 class=\"heading-medium\">#{{ccdCaseNumber | ccdHyphens }}</h1>\n      <h1 class=\"heading-large\">Why are you making this refund?\n        </h1>\n       \n\n        <div class=\"govuk-form-group\">\n            <form novalidate>\n                <div class=\"govuk-form-group\">\n                  <form [formGroup]=\"remissionForm\" novalidate>\n                    <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-conditional-hint\">\n                       \n                          <div\n                            [ngClass]=\"refundHasError ? 'govuk-radios govuk-radios--conditional form-group-error' : 'govuk-radios govuk-radios--conditional'\"\n                            data-module=\"govuk-radios\" >\n                            <p class=\"inline-error-message\" *ngIf=\"refundHasError\">\n                              <span *ngIf=\"refundHasError\">Select a reason why you\u2019re making this refund</span>\n                            </p>\n\n                           \n\n                            <div class = \"container-fluid\">\n                              <div class=\"row\">\n                              <div class=\"govuk-radios__item col-md-4\" *ngFor=\"let refund of commonRefundReasons; let i = index;\">\n                                <!-- <div *ngIf = \"{{refund.name}} !== 'Retrospective remission'\"> -->\n                                  <input   class=\"govuk-radios__input\" id=\"{{refund.name}}\" name=\"refundReason\" type=\"radio\"\n                                  formControlName=\"refundReason\" value={{refund.code}}\n                                    (change)=\"selectRadioButton(refund.name, refund.name)\">\n                                  <label class=\"govuk-label--s govuk-radios__label govuk-font__custom\" for=\"how-contacted-conditional\">\n                                    {{refund.name}}\n                                  </label>\n\n                                  <div class=\"govuk-radios__conditional\" *ngIf=\"isRefundReasonsSelected && showReasonText && selectedRefundReason === refund.name \" >\n                                      <label class=\"govuk-label govuk-label--m\" for=\"{{refund.name}}\">\n                                          Enter reason\n                                      </label>\n                                      <p  class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                          <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                        </p>\n                                    <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"30\" formControlName=\"reason\">\n                                  \n                                  </div>\n                                <!-- </div> -->\n                              </div>\n                              </div>\n                            </div>\n                            <br/>\n                            <div>\n                                <select formControlName=\"refundDDReason\" class=\"govuk-select\" id=\"sort\"  (change)=\"selectchange($event)\">\n                                  <option selected='selected' [defaultSelected]=true [value]=\"default\" >{{default}}</option>  \n                                  <!-- <option value=\"\" selected='selected'>Select a different reason</option> -->\n                                    <option  *ngFor=\"let refund of refundReasons;\" id=\"{{refund.name}}\"  value=\"{{refund.code}}\">{{refund.name}}</option>\n                                  </select>\n                              \n                            </div>\n                                <br/>\n                                <div class=\"govuk-radios__conditional\" *ngIf=\"showReasonText &&  !isRefundReasonsSelected\" >\n                                    <label class=\"govuk-label govuk-label--m\" for=\"amount\">\n                                        Enter reason\n                                    </label>\n                                    <p class=\"inline-error-message\" *ngIf=\"isReasonEmpty\">\n                                        <span *ngIf=\"isReasonEmpty\">Enter a reason why you\u2019re making this refund</span>\n                                      </p>\n                                  <input class=\"govuk-input govuk-input--width-10\" [ngClass]=\"{'inline-error-class': isReasonEmpty}\" id=\"reason\" aria-label=\"reason\"  name=\"reason\" type=\"text\" aria-describedby=\"reason\" maxlength=\"{{reasonLength}}\"  formControlName=\"reason\">\n                                \n                                </div>\n\n                           \n                          </div>\n                    </fieldset>\n                  </form>\n               </div>\n               </form>\n        </div>\n        <div class=\"govuk-button-group\">\n            <button (click)=\"gotoServiceRequestPage($event)\" class=\"govuk-button govuk-button--secondary\"> Previous</button>\n            <button (click)=\"gotoIssueRefundConfirmation(payment)\" class=\"govuk-button\"> Continue</button>\n          <p>\n              <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n                  Cancel\n              </a>\n          </p>\n        </div>\n      \n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'checkissuerefundpage'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='CHECKISSUEREFUNDPAGE'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> {{ selectedRefundReason }}\n               <a (click)=\"changeIssueRefundReason()\" class=\"govuk-link right\" >Change</a>\n              </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment amount</td>\n              <td class=\"govuk-table__cell\">{{this.payment.amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoIssueRefundPage()\"> Previous </button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n    (click)=\"confirmIssueRefund()\">\n        Submit refund\n      </button>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <!--Retro Refund-->\n  <ng-container *ngIf=\"viewCompStatus === 'addrefundforremission'\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='ADDREFUNDFORREMISSION'> \n      <div class=\"govuk-warning-text\">\n       \n          <h1 class=\"heading-large\"> Check your answers</h1>\n      </div>\n      <table class=\"govuk-table\">\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Reason for refund</td>\n              <td class=\"govuk-table__cell\"> Retrospective remission </td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Payment reference</td>\n              <td class=\"govuk-table__cell\">{{this.payment.reference}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Refund amount</td>\n              <td class=\"govuk-table__cell\">{{this.remission.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee code</td>\n              <td class=\"govuk-table__cell\">{{this.remission.fee_code}}</td>\n          </tr>\n          <tr class=\"govuk-table__row\">\n              <td class=\"govuk-table__cell govuk-!-font-weight-bold\">Fee amount</td>\n              <td class=\"govuk-table__cell\">{{feeamount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n          </tr>\n      </table>\n\n      <button type=\"submit\" class=\"button govuk-button--secondary\" (click)=\"gotoServiceRequestPage($event)\">Previous</button>\n      <button type=\"submit\"\n      [disabled]=\"isConfirmationBtnDisabled\"\n      [ngClass]='isConfirmationBtnDisabled ? \"button button--disabled govuk-!-margin-right-1\" : \"button govuk-!-margin-right-1\"'\n      (click)=\"processRefund()\">\n        Submit refund\n      </button>\n      <p>\n          <a (click)=\"gotoCasetransationPageCancelBtnClicked()\" class=\"govuk-link\" data-module=\"govuk-button\">\n              Cancel\n          </a>\n      </p>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"viewStatus === 'retrorefundconfirmationpage'\">\n    <div class=\"govuk-grid-row\">\n      <div >\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">\n            Refund submitted\n          </h1>\n          \n          <div class=\"govuk-panel__body\">\n            <p class=\"govuk-body\" style=\"color: white\"><strong>Refund reference: {{refundReference}}</strong></p>\n          </div>\n    \n        </div>\n        <div *ngIf=\"isPaymentSuccess\">\n        <h2 class=\"govuk-heading-l\">What happens next</h2>\n        <p class=\"govuk-body\">\n          A refund request for {{ refundAmount| currency:'GBP':'symbol-narrow':'1.2-2'}} has been passed to a team leader to approve.\n        </p>\n      </div>\n        <p class=\"govuk-body\">\n          <a (click)=\"gotoCasetransationPage()\"  class=\"govuk-link\">Return to case</a>\n       </p>\n      </div>\n    </div>\n  </ng-container>\n\n</div>\n\n\n\n",
                 styles: [".add-remission .button{padding:.5em;font-size:19px;font-weight:200;margin:20px 2px}.add-remission td.govuk-table__cell{width:50%}.add-remission .govuk-button--secondary{background-color:#dee0e2;box-shadow:0 2px 0 #858688;color:#0b0c0c;margin-right:.5em}.add-remission .govuk-label--s,.add-remission .govuk-warning-text__text,.add-remission .hmcts-currency-input__symbol{font-size:19px;font-weight:400}.add-remission .inline-error-class{outline:#a71414 solid 3px;outline-offset:0}.add-remission .inline-error-message{color:#a71414;font-weight:700;margin-top:10px;font-size:20px}.add-remission .govuk-button,.add-remission .govuk-link{margin-right:1em;font-size:19px;font-weight:200}.add-remission .govuk-button-group{padding-top:2em}.add-remission .heading-medium{margin-top:.875em}.add-remission .heading-large{margin-top:.25em}.add-remission .govuk-panel--confirmation{color:#fff;background:#00703c}.add-remission .govuk-panel__title{font-size:5rem}.add-remission .govuk-body,.add-remission .govuk-body-m{font-size:2.1875rem}.add-remission .govuk-radios__item{clear:initial!important;display:inline-block;width:45%!important}.add-remission .govuk-radios__conditional{padding-top:12px!important}.add-remission .radio,.add-remission .right{float:right}.govuk-input{font-size:19px}.govuk-select{font-size:19px;font-weight:400}.govuk-input--width-10{max-width:36ex}.govuk-label--m{font-size:19px;font-weight:400}.govuk-error-summary__body{font-size:19px!important}.govuk-error-summary__title{font-size:24px!important}"]
             }] }
 ];
@@ -6859,14 +6870,13 @@ class TableComponent {
              */
             (r, { user_full_name }) => (r[user_full_name] = '', r)), {});
             this.userLst = Object.keys(this.userLst);
-            this.userLst.sort((/**
-             * @param {?} a
-             * @param {?} b
-             * @return {?}
-             */
-            (a, b) => a.localeCompare(b) //using String.prototype.localCompare()
-            ));
         }
+        this.userLst.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        (a, b) => a.toString().localeCompare(b)));
     }
     /**
      * Set the paginator and sort after the view init since this component will
@@ -6875,12 +6885,12 @@ class TableComponent {
      */
     ngAfterViewInit() {
         this.dataSource.sort = this.sort;
-        /** @type {?} */
-        const sortState = { active: 'date_updated', direction: 'desc' };
-        this.sort.active = sortState.active;
-        this.sort.direction = sortState.direction;
-        this.sort.sortChange.emit(sortState);
+        //const sortState: Sort = {active: 'date_updated', direction: 'desc'};
+        // this.sort.active = sortState.active;
+        // this.sort.direction = sortState.direction;
+        // this.sort.sortChange.emit(sortState);
         this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
         this.cdRef.detectChanges();
     }
     /**
@@ -6927,7 +6937,7 @@ class TableComponent {
 TableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ccpay-table',
-                template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n<div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group\" style=\"float: right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option  *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container mat-elevation-z8\">\n\n  <mat-table [dataSource]=\"dataSource\" >\n\n    <ng-container matColumnDef=\"ccd_case_number\">\n      <mat-header-cell  *matHeaderCellDef >Case ID </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"refund_reference\">\n      <mat-header-cell  *matHeaderCellDef > Refund reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"reason\">\n      <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.reason}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"user_full_name\">\n      <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef > Date updated </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n        </ng-container>\n      \n        <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n        </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n    </mat-row>\n  </mat-table>\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
+                template: "<div class=\"add-remission\">\n  <div *ngIf=\"errorMessage\">\n    <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n        Error in processing the request\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n\n<div *ngIf=\"dataSource.data.length > 0\"  class=\"govuk-form-group\" style=\"float: right\">\n    <label class=\"govuk-label dropdpwn\" for=\"sort\" >\n      Filter by caseworker:\n    </label>\n    <select class=\"govuk-select\" id=\"sort\" name=\"sort\" (change)=\"selectchange($event)\">\n      <option value=\"\" selected='selected'>All caseworkers</option>\n      <option  *ngFor=\"let name of userLst;\" value=\"{{name}}\">{{name}}</option>\n    </select>\n  </div>\n \n<div *ngIf=\"dataSource.data.length > 0\" class=\"example-container mat-elevation-z8\">\n\n  <mat-table [dataSource]=\"dataSource\" matSort>\n\n    <ng-container matColumnDef=\"ccd_case_number\">\n      <mat-header-cell  *matHeaderCellDef >Case ID </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.ccd_case_number | ccdHyphens }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"refund_reference\">\n      <mat-header-cell  *matHeaderCellDef > Refund reference </mat-header-cell>\n      <mat-cell  *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.refund_reference}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"reason\">\n      <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" class=\"whitespace-inherit\"> {{row.reason}} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"user_full_name\">\n      <mat-header-cell *matHeaderCellDef > Submitted by </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.user_full_name }} </mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef=\"date_updated\">\n        <mat-header-cell *matHeaderCellDef mat-sort-header> Date updated </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" class=\"whitespace-inherit\"> {{row.date_updated | date:'d MMMM yyyy'}} </mat-cell>\n      </ng-container>\n\n      <ng-container *ngIf=\"isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\" > <a href=\"\">Review case</a>&nbsp;<a href=\"javascript:void(0)\" (click)=\"goToRefundProcessComponent(row.refund_reference, row)\">Process refund</a></mat-cell>\n        </ng-container>\n      \n        <ng-container *ngIf=\"!isApprovalFlow\" matColumnDef=\"Action\">\n          <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>\n          <mat-cell *matCellDef=\"let row\" [style.color]=\"row.color\"> <a href=\"javascript:void(0)\" (click)=\"goToRefundViewComponent(row.refund_reference, row)\">Review refund</a></mat-cell>\n        </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\">\n    </mat-row>\n  </mat-table>\n  <mat-paginator [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator>\n</div>\n\n<div class=\"govuk-label dropdpwn\" *ngIf=\"dataSource.data.length === 0\">No records to display</div>\n",
                 styles: [".mat-header-row{min-height:27px}.mat-cell{padding:0 10px 0 0;text-align:left;word-wrap:break-word;white-space:inherit!important;font-size:19px;line-height:25px;font-family:nta,Arial,sans-serif;font-weight:400}.mat-table{color:#0b0c0c;display:table;font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:1px;box-sizing:border-box;text-indent:initial;border-spacing:0;border-collapse:collapse;font-size:1.1875rem;line-height:1.31578947;table-layout:fixed;width:102%}.mat-header-cell{text-align:left;font-weight:700;padding:10px 10px 10px 0;word-wrap:break-word;font-size:19px;line-height:25px;color:#005ea5;cursor:pointer;font-family:inherit}.dropdpwn{display:inline-block;margin-right:10px;font-size:19px}.mat-column-ccdCaseNumber{flex:3em}.mat-column-refundReference{flex:6em}.mat-column-reason{flex:2em}.govuk-select{font-size:19px;font-weight:400}.govuk-error-summary__title{font-size:24px!important}"]
             }] }
 ];