@hmcts/rpx-xui-common-lib 2.0.7 → 2.0.8-remove-special-characters-allow-space

package/fesm2015/hmcts-rpx-xui-common-lib.mjs

@@ -2478,11 +2478,12 @@ class SearchLocationComponent {
         this.locationSelected = new EventEmitter();
         this.locationTermSearchInputChanged = new EventEmitter();
         this.searchLocationChanged = new EventEmitter();
-        this.searchTermFormControl = new FormControl('');
+        this.searchTermFormControl = new FormControl('', Validators.pattern('/[^a-zA-Z -]/'));
         this.minSearchCharacters = 3;
         this.term = '';
         this.pReset = true;
         this.debounceTimeInput = 300;
+        this.binaryValue = '';
     }
     ngOnInit() {
         const searchInputChanges$ = this.searchTermFormControl.valueChanges
@@ -2550,13 +2551,23 @@ class SearchLocationComponent {
         }
         return locations.filter(location => !selectedLocations.map(selectedLocation => selectedLocation.epimms_id).includes(location.epimms_id) && location[this.propertyNameFilter]);
     }
+    RemoveInvalidString(formInputValue) {
+        const element = formInputValue.target;
+        const newInputValue = element.value;
+        if (/[^a-zA-Z -]/.test(newInputValue)) {
+            element.value = this.binaryValue;
+        }
+        else {
+            this.binaryValue = newInputValue;
+        }
+    }
 }
 SearchLocationComponent.allLocationAPI = `api/locations/getLocations`;
 SearchLocationComponent.ɵfac = function SearchLocationComponent_Factory(t) { return new (t || SearchLocationComponent)(i0.ɵɵdirectiveInject(LocationService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(RefDataService)); };
-SearchLocationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchLocationComponent, selectors: [["exui-search-location"]], inputs: { form: "form", field: "field", disabled: "disabled", singleMode: "singleMode", locationType: "locationType", serviceIds: "serviceIds", submitted: "submitted", bookingCheck: "bookingCheck", selectedLocations: "selectedLocations", propertyNameFilter: "propertyNameFilter", delay: "delay", reset: "reset" }, outputs: { locationSelected: "locationSelected", locationTermSearchInputChanged: "locationTermSearchInputChanged", searchLocationChanged: "searchLocationChanged" }, decls: 6, vars: 6, consts: [[1, "auto-complete-container"], ["id", "inputLocationSearch", 1, "govuk-input", 3, "formControl", "matAutocomplete", "input"], ["autoActiveFirstOption", "", 1, "mat-autocomplete-panel-extend"], ["autoSearchLocation", "matAutocomplete"], [4, "ngIf"], [3, "onSelectionChange", 4, "ngFor", "ngForOf"], [3, "onSelectionChange"]], template: function SearchLocationComponent_Template(rf, ctx) {
+SearchLocationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchLocationComponent, selectors: [["exui-search-location"]], inputs: { form: "form", field: "field", disabled: "disabled", singleMode: "singleMode", locationType: "locationType", serviceIds: "serviceIds", submitted: "submitted", bookingCheck: "bookingCheck", selectedLocations: "selectedLocations", propertyNameFilter: "propertyNameFilter", delay: "delay", reset: "reset" }, outputs: { locationSelected: "locationSelected", locationTermSearchInputChanged: "locationTermSearchInputChanged", searchLocationChanged: "searchLocationChanged" }, decls: 6, vars: 6, consts: [[1, "auto-complete-container"], ["id", "inputLocationSearch", 1, "govuk-input", 3, "formControl", "matAutocomplete", "keyup", "input"], ["autoActiveFirstOption", "", 1, "mat-autocomplete-panel-extend"], ["autoSearchLocation", "matAutocomplete"], [4, "ngIf"], [3, "onSelectionChange", 4, "ngFor", "ngForOf"], [3, "onSelectionChange"]], template: function SearchLocationComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "input", 1);
-            i0.ɵɵlistener("input", function SearchLocationComponent_Template_input_input_1_listener() { return ctx.onInput(); });
+            i0.ɵɵlistener("keyup", function SearchLocationComponent_Template_input_keyup_1_listener($event) { return ctx.RemoveInvalidString($event); })("input", function SearchLocationComponent_Template_input_input_1_listener() { return ctx.onInput(); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(2, "mat-autocomplete", 2, 3);
             i0.ɵɵtemplate(4, SearchLocationComponent_ng_container_4_Template, 2, 1, "ng-container", 4);
@@ -2575,7 +2586,7 @@ SearchLocationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchLocationComponent, [{
             type: Component,
-            args: [{ selector: 'exui-search-location', template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"searchTermFormControl\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <ng-container *ngIf=\"filteredList$ | async as filteredList\">\n      <ng-container *ngIf=\"filteredList && filteredList.length >= 0\">\n        <mat-option *ngFor=\"let location of filteredList\" (onSelectionChange)=\"onSelectedLocation(location)\">\n          {{ location[propertyNameFilter] }}\n        </mat-option>\n        <mat-option *ngIf=\"filteredList.length === 0\">{{'No results found' | rpxTranslate}}</mat-option>\n      </ng-container>\n    </ng-container>\n  </mat-autocomplete>\n</div>\n", styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width: 641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input{line-height:24px;font-size:19px}\n"] }]
+            args: [{ selector: 'exui-search-location', template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    (keyup)=\"RemoveInvalidString($event)\"\n    (input)=\"onInput()\"\n    [formControl]=\"searchTermFormControl\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <ng-container *ngIf=\"filteredList$ | async as filteredList\">\n      <ng-container *ngIf=\"filteredList && filteredList.length >= 0\">\n        <mat-option *ngFor=\"let location of filteredList\" (onSelectionChange)=\"onSelectedLocation(location)\">\n          {{ location[propertyNameFilter] }}\n        </mat-option>\n        <mat-option *ngIf=\"filteredList.length === 0\">{{'No results found' | rpxTranslate}}</mat-option>\n      </ng-container>\n    </ng-container>\n  </mat-autocomplete>\n</div>\n", styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width: 641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input{line-height:24px;font-size:19px}\n"] }]
         }], function () { return [{ type: LocationService }, { type: SessionStorageService }, { type: RefDataService }]; }, { form: [{
                 type: Input
             }], field: [{
@@ -7293,19 +7304,32 @@ function UserDetailsComponent_table_1_tr_17_div_9_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "Manage fee accounts"));
     }
 }
-function UserDetailsComponent_table_1_tr_17_a_11_Template(rf, ctx) {
+function UserDetailsComponent_table_1_tr_17_div_10_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "a", 15);
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵtext(1);
+        i0.ɵɵpipe(2, "rpxTranslate");
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const accesstype_r13 = ctx.$implicit;
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, accesstype_r13));
+    }
+}
+function UserDetailsComponent_table_1_tr_17_a_12_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "a", 16);
         i0.ɵɵtext(1);
         i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵelementStart(3, "span", 16);
+        i0.ɵɵelementStart(3, "span", 17);
         i0.ɵɵtext(4);
         i0.ɵɵpipe(5, "rpxTranslate");
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const ctx_r11 = i0.ɵɵnextContext(3);
-        i0.ɵɵproperty("routerLink", ctx_r11.editPermissionRouterLink);
+        const ctx_r12 = i0.ɵɵnextContext(3);
+        i0.ɵɵproperty("routerLink", ctx_r12.editPermissionRouterLink);
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 3, "Change"), " ");
         i0.ɵɵadvance(3);
@@ -7324,15 +7348,16 @@ function UserDetailsComponent_table_1_tr_17_Template(rf, ctx) {
         i0.ɵɵtemplate(7, UserDetailsComponent_table_1_tr_17_div_7_Template, 3, 3, "div", 3);
         i0.ɵɵtemplate(8, UserDetailsComponent_table_1_tr_17_div_8_Template, 3, 3, "div", 3);
         i0.ɵɵtemplate(9, UserDetailsComponent_table_1_tr_17_div_9_Template, 3, 3, "div", 3);
+        i0.ɵɵtemplate(10, UserDetailsComponent_table_1_tr_17_div_10_Template, 3, 3, "div", 14);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(10, "td", 12);
-        i0.ɵɵtemplate(11, UserDetailsComponent_table_1_tr_17_a_11_Template, 6, 7, "a", 14);
+        i0.ɵɵelementStart(11, "td", 12);
+        i0.ɵɵtemplate(12, UserDetailsComponent_table_1_tr_17_a_12_Template, 6, 7, "a", 15);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
         const ctx_r5 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 7, "Permissions"));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 8, "Permissions"));
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx_r5.user.manageOrganisations === "Yes");
         i0.ɵɵadvance(1);
@@ -7343,6 +7368,8 @@ function UserDetailsComponent_table_1_tr_17_Template(rf, ctx) {
         i0.ɵɵproperty("ngIf", ctx_r5.userHasRole("pui-caa"));
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx_r5.userHasRole("pui-finance-manager"));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r5.enabledAccessTypes);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx_r5.editPermissionRouterLink && ctx_r5.showEditLink);
     }
@@ -7368,7 +7395,7 @@ function UserDetailsComponent_table_1_Template(rf, ctx) {
         i0.ɵɵelementEnd();
         i0.ɵɵelement(16, "td", 12);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(17, UserDetailsComponent_table_1_tr_17_Template, 12, 9, "tr", 13);
+        i0.ɵɵtemplate(17, UserDetailsComponent_table_1_tr_17_Template, 13, 10, "tr", 13);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
@@ -7387,9 +7414,9 @@ function UserDetailsComponent_table_1_Template(rf, ctx) {
 }
 function UserDetailsComponent_button_2_Template(rf, ctx) {
     if (rf & 1) {
-        const _r13 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 17);
-        i0.ɵɵlistener("click", function UserDetailsComponent_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.suspendUser(ctx_r12.user)); });
+        const _r15 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 18);
+        i0.ɵɵlistener("click", function UserDetailsComponent_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.suspendUser(ctx_r14.user)); });
         i0.ɵɵtext(1);
         i0.ɵɵpipe(2, "rpxTranslate");
         i0.ɵɵelementEnd();
@@ -7401,8 +7428,8 @@ function UserDetailsComponent_button_2_Template(rf, ctx) {
 }
 function UserDetailsComponent_div_3_Template(rf, ctx) {
     if (rf & 1) {
-        const _r15 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div")(1, "div", 18)(2, "p");
+        const _r17 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div")(1, "div", 19)(2, "p");
         i0.ɵɵtext(3);
         i0.ɵɵpipe(4, "rpxTranslate");
         i0.ɵɵelementEnd();
@@ -7414,8 +7441,8 @@ function UserDetailsComponent_div_3_Template(rf, ctx) {
         i0.ɵɵtext(9);
         i0.ɵɵpipe(10, "rpxTranslate");
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(11, "a", 19);
-        i0.ɵɵlistener("click", function UserDetailsComponent_div_3_Template_a_click_11_listener() { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.reinviteClick(ctx_r14.user)); });
+        i0.ɵɵelementStart(11, "a", 20);
+        i0.ɵɵlistener("click", function UserDetailsComponent_div_3_Template_a_click_11_listener() { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.reinviteClick(ctx_r16.user)); });
         i0.ɵɵtext(12);
         i0.ɵɵpipe(13, "rpxTranslate");
         i0.ɵɵelementEnd()();
@@ -7433,7 +7460,7 @@ function UserDetailsComponent_div_3_Template(rf, ctx) {
 }
 function UserDetailsComponent_p_4_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "p", 20)(1, "a", 21);
+        i0.ɵɵelementStart(0, "p", 21)(1, "a", 22);
         i0.ɵɵtext(2);
         i0.ɵɵpipe(3, "rpxTranslate");
         i0.ɵɵelementEnd();
@@ -7453,6 +7480,7 @@ function UserDetailsComponent_p_4_Template(rf, ctx) {
 }
 class UserDetailsComponent {
     constructor() {
+        this.enabledAccessTypes = [];
         this.showEditLink = false;
         this.showHelpLink = false;
         this.suspendUserEvent = new EventEmitter();
@@ -7473,7 +7501,7 @@ class UserDetailsComponent {
     }
 }
 UserDetailsComponent.ɵfac = function UserDetailsComponent_Factory(t) { return new (t || UserDetailsComponent)(); };
-UserDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserDetailsComponent, selectors: [["xuilib-user-details"]], inputs: { user: "user", editPermissionRouterLink: "editPermissionRouterLink", warningTitle: "warningTitle", showEditLink: "showEditLink", showHelpLink: "showHelpLink", suspendHelpLink: "suspendHelpLink", showSuspendUserButton: "showSuspendUserButton" }, outputs: { suspendUserEvent: "suspendUserEvent", reinvite: "reinvite" }, decls: 5, vars: 5, consts: [["class", "govuk-warning-text", 4, "ngIf"], ["class", "govuk-table", "role", "presentation", 4, "ngIf"], ["class", "govuk-button govuk-button--warning", 3, "click", 4, "ngIf"], [4, "ngIf"], ["class", "govuk-body", 4, "ngIf"], [1, "govuk-warning-text"], [1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], ["role", "presentation", 1, "govuk-table"], [1, "govuk-table__body"], [1, "govuk-table__row"], ["scope", "row", 1, "govuk-table__header"], [1, "govuk-table__cell"], ["class", "govuk-table__row", 4, "ngIf"], ["role", "link", 3, "routerLink", 4, "ngIf"], ["role", "link", 3, "routerLink"], [1, "govuk-visually-hidden"], [1, "govuk-button", "govuk-button--warning", 3, "click"], [1, "govuk-inset-text"], ["role", "button", "draggable", "false", "id", "resend-invite-button", 1, "govuk-button", 3, "click"], [1, "govuk-body"], ["target", "_blank", 3, "routerLink"]], template: function UserDetailsComponent_Template(rf, ctx) {
+UserDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserDetailsComponent, selectors: [["xuilib-user-details"]], inputs: { user: "user", enabledAccessTypes: "enabledAccessTypes", editPermissionRouterLink: "editPermissionRouterLink", warningTitle: "warningTitle", showEditLink: "showEditLink", showHelpLink: "showHelpLink", suspendHelpLink: "suspendHelpLink", showSuspendUserButton: "showSuspendUserButton" }, outputs: { suspendUserEvent: "suspendUserEvent", reinvite: "reinvite" }, decls: 5, vars: 5, consts: [["class", "govuk-warning-text", 4, "ngIf"], ["class", "govuk-table", "role", "presentation", 4, "ngIf"], ["class", "govuk-button govuk-button--warning", 3, "click", 4, "ngIf"], [4, "ngIf"], ["class", "govuk-body", 4, "ngIf"], [1, "govuk-warning-text"], [1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], ["role", "presentation", 1, "govuk-table"], [1, "govuk-table__body"], [1, "govuk-table__row"], ["scope", "row", 1, "govuk-table__header"], [1, "govuk-table__cell"], ["class", "govuk-table__row", 4, "ngIf"], [4, "ngFor", "ngForOf"], ["role", "link", 3, "routerLink", 4, "ngIf"], ["role", "link", 3, "routerLink"], [1, "govuk-visually-hidden"], [1, "govuk-button", "govuk-button--warning", 3, "click"], [1, "govuk-inset-text"], ["role", "button", "draggable", "false", "id", "resend-invite-button", 1, "govuk-button", 3, "click"], [1, "govuk-body"], ["target", "_blank", 3, "routerLink"]], template: function UserDetailsComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵtemplate(0, UserDetailsComponent_div_0_Template, 6, 3, "div", 0);
             i0.ɵɵtemplate(1, UserDetailsComponent_table_1_Template, 18, 11, "table", 1);
@@ -7492,13 +7520,15 @@ UserDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserDe
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.showHelpLink && ctx.suspendHelpLink);
         }
-    }, dependencies: [i1.NgIf, i2$1.RouterLink, i2.RpxTranslatePipe], styles: ["[_nghost-%COMP%]{display:block}"] });
+    }, dependencies: [i1.NgForOf, i1.NgIf, i2$1.RouterLink, i2.RpxTranslatePipe], styles: ["[_nghost-%COMP%]{display:block}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserDetailsComponent, [{
             type: Component,
-            args: [{ selector: 'xuilib-user-details', template: "<div class=\"govuk-warning-text\" *ngIf=\"warningTitle && warningTitle !== ''\">\n<span class=\"govuk-warning-text__icon\">!</span>\n<strong class=\"govuk-warning-text__text\">\n    {{ warningTitle | rpxTranslate}}\n</strong>\n</div>\n<table class=\"govuk-table\" *ngIf=\"user\" role=\"presentation\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header\" scope=\"row\">{{'Name' | rpxTranslate}}</th>\n        <td class=\"govuk-table__cell\">{{user.fullName | rpxTranslate}}</td>\n        <td class=\"govuk-table__cell\"></td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header\" scope=\"row\">{{'Email address' | rpxTranslate}}</th>\n        <td class=\"govuk-table__cell\">{{user.email}}</td>\n        <td class=\"govuk-table__cell\"></td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngIf=\"!user.resendInvite\">\n        <th class=\"govuk-table__header\" scope=\"row\">{{'Permissions' | rpxTranslate}}</th>\n        <td class=\"govuk-table__cell\">\n          <div *ngIf=\"user.manageOrganisations === 'Yes'\">{{'Manage organisations' | rpxTranslate}}</div>\n          <div *ngIf=\"user.manageUsers === 'Yes'\">{{'Manage users' | rpxTranslate}}</div>\n          <div *ngIf=\"user.manageCases === 'Yes'\">{{'Manage cases' | rpxTranslate}}</div>\n          <div *ngIf=\"userHasRole('pui-caa')\">{{'Case access administrator' | rpxTranslate}}</div>\n          <div *ngIf=\"userHasRole('pui-finance-manager')\">{{'Manage fee accounts' | rpxTranslate}}</div>\n        </td>\n        <td class=\"govuk-table__cell\"><a *ngIf=\"editPermissionRouterLink && showEditLink\" role=\"link\" [routerLink]=\"editPermissionRouterLink\">{{'Change' | rpxTranslate}} <span class=\"govuk-visually-hidden\">{{'roles' | rpxTranslate}}</span></a></td>\n    </tr>\n  </tbody>\n</table>\n<button *ngIf=\"showSuspendUserButton\" class=\"govuk-button govuk-button--warning\" (click)=\"suspendUser(user)\">\n  {{'Suspend account' | rpxTranslate}}\n</button>\n<div *ngIf=\"user && user.resendInvite\">\n  <div class=\"govuk-inset-text\">\n    <p>{{'This user has already been invited but has not activated their account.' | rpxTranslate}}</p>\n    <p>{{'If you resend an invitation, they\\'ll receive an email from HM Courts and Tribunals to finish setting up their account.' | rpxTranslate}}</p>\n    <p>{{'You can\\'t invite the same user more than once an hour.' | rpxTranslate}}</p>\n  </div>\n  <a role=\"button\" draggable=\"false\" class=\"govuk-button\" (click)=\"reinviteClick(user)\" id=\"resend-invite-button\">\n      {{'Resend invitation' | rpxTranslate}}\n  </a>\n</div>\n<p class=\"govuk-body\" *ngIf=\"showHelpLink && suspendHelpLink\"><a [routerLink]=\"suspendHelpLink\" target=\"_blank\">{{'Get help' | rpxTranslate}}</a> {{'to reactivate this account.' | rpxTranslate}}</p>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'xuilib-user-details', template: "<div class=\"govuk-warning-text\" *ngIf=\"warningTitle && warningTitle !== ''\">\n<span class=\"govuk-warning-text__icon\">!</span>\n<strong class=\"govuk-warning-text__text\">\n    {{ warningTitle | rpxTranslate}}\n</strong>\n</div>\n<table class=\"govuk-table\" *ngIf=\"user\" role=\"presentation\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header\" scope=\"row\">{{'Name' | rpxTranslate}}</th>\n        <td class=\"govuk-table__cell\">{{user.fullName | rpxTranslate}}</td>\n        <td class=\"govuk-table__cell\"></td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header\" scope=\"row\">{{'Email address' | rpxTranslate}}</th>\n        <td class=\"govuk-table__cell\">{{user.email}}</td>\n        <td class=\"govuk-table__cell\"></td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngIf=\"!user.resendInvite\">\n        <th class=\"govuk-table__header\" scope=\"row\">{{'Permissions' | rpxTranslate}}</th>\n        <td class=\"govuk-table__cell\">\n          <div *ngIf=\"user.manageOrganisations === 'Yes'\">{{'Manage organisations' | rpxTranslate}}</div>\n          <div *ngIf=\"user.manageUsers === 'Yes'\">{{'Manage users' | rpxTranslate}}</div>\n          <div *ngIf=\"user.manageCases === 'Yes'\">{{'Manage cases' | rpxTranslate}}</div>\n          <div *ngIf=\"userHasRole('pui-caa')\">{{'Case access administrator' | rpxTranslate}}</div>\n          <div *ngIf=\"userHasRole('pui-finance-manager')\">{{'Manage fee accounts' | rpxTranslate}}</div>\n          <div *ngFor=\"let accesstype of enabledAccessTypes\">{{ accesstype | rpxTranslate}}</div> \n        </td>\n        <td class=\"govuk-table__cell\"><a *ngIf=\"editPermissionRouterLink && showEditLink\" role=\"link\" [routerLink]=\"editPermissionRouterLink\">{{'Change' | rpxTranslate}} <span class=\"govuk-visually-hidden\">{{'roles' | rpxTranslate}}</span></a></td>\n    </tr>\n  </tbody>\n</table>\n<button *ngIf=\"showSuspendUserButton\" class=\"govuk-button govuk-button--warning\" (click)=\"suspendUser(user)\">\n  {{'Suspend account' | rpxTranslate}}\n</button>\n<div *ngIf=\"user && user.resendInvite\">\n  <div class=\"govuk-inset-text\">\n    <p>{{'This user has already been invited but has not activated their account.' | rpxTranslate}}</p>\n    <p>{{'If you resend an invitation, they\\'ll receive an email from HM Courts and Tribunals to finish setting up their account.' | rpxTranslate}}</p>\n    <p>{{'You can\\'t invite the same user more than once an hour.' | rpxTranslate}}</p>\n  </div>\n  <a role=\"button\" draggable=\"false\" class=\"govuk-button\" (click)=\"reinviteClick(user)\" id=\"resend-invite-button\">\n      {{'Resend invitation' | rpxTranslate}}\n  </a>\n</div>\n<p class=\"govuk-body\" *ngIf=\"showHelpLink && suspendHelpLink\"><a [routerLink]=\"suspendHelpLink\" target=\"_blank\">{{'Get help' | rpxTranslate}}</a> {{'to reactivate this account.' | rpxTranslate}}</p>\n", styles: [":host{display:block}\n"] }]
         }], null, { user: [{
                 type: Input
+            }], enabledAccessTypes: [{
+                type: Input
             }], editPermissionRouterLink: [{
                 type: Input
             }], warningTitle: [{