@hmcts/rpx-xui-common-lib 1.5.4-judge-selection → 1.5.5-autocomplete-error

package/bundles/hmcts-rpx-xui-common-lib.umd.js

@@ -3647,12 +3647,22 @@
             this.locationChanged = new i0.EventEmitter();
             this.minSearchCharacters = 3;
             this.keyUpSubject$ = new rxjs.Subject();
+            this.readyAfterContent = false;
             this.findLocationFormGroup = fb.group({
                 findLocationFormControl: [null],
                 locationSelectedFormControl: [null]
             });
             this.selectedLocations$ = rxjs.of([]);
         }
+        /**
+         * @return {?}
+         */
+        SearchLocationComponent.prototype.ngAfterContentInit = /**
+         * @return {?}
+         */
+            function () {
+                this.readyAfterContent = true;
+            };
         /**
          * @return {?}
          */
@@ -3826,7 +3836,7 @@
         SearchLocationComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'exui-search-location',
-                        template: "<div class=\"auto-complete-container\">\n  <div class=\"autocomplete__wrapper\">\n    <input\n      [formControl]=\"findLocationFormGroup.controls.findLocationFormControl\"\n      [matAutocomplete]=\"auto\"\n      (keydown)=\"onKeyDown()\"\n      (keyup)=\"onKeyUp($event)\"\n      aria-expanded=\"false\"\n      aria-owns=\"input-selected-location__listbox\"\n      aria-autocomplete=\"both\"\n      autocomplete=\"off\"\n      class=\"autocomplete__input autocomplete__input--default search-box\"\n      [attr.disabled]=\"!disabled ? null: disabled\"\n      [value]=\"getControlCourtNameValue()\"\n      #inputSelectedLocation>\n    <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #auto=\"matAutocomplete\">\n      <mat-option *ngFor=\"let location of locationSource$ | async\"\n      [value]=\"getDisplayName(location)\"\n      (onSelectionChange)=\"onSelectionChange(location)\"\n      [ngClass]=\"{'hide-autocomplete': !showAutocomplete}\">\n      {{ getDisplayName(location) }}\n      </mat-option>\n      <mat-option *ngIf=\"!(locationSource$ | async)?.length && showAutocomplete\">{{ 'No results found' }}</mat-option>\n    </mat-autocomplete>\n  </div>\n</div>",
+                        template: "<div class=\"auto-complete-container\">\n  <div *ngIf=\"readyAfterContent\" class=\"autocomplete__wrapper\">\n    <input\n      [formControl]=\"findLocationFormGroup.controls.findLocationFormControl\"\n      [matAutocomplete]=\"autoSearchLocation\"\n      (keydown)=\"onKeyDown()\"\n      (keyup)=\"onKeyUp($event)\"\n      class=\"autocomplete__input autocomplete__input--default search-box\"\n      [attr.disabled]=\"!disabled ? null: disabled\"\n      [value]=\"getControlCourtNameValue()\"\n      #inputSelectedLocation>\n    <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n      <mat-option *ngFor=\"let location of locationSource$ | async\"\n      [value]=\"getDisplayName(location)\"\n      (onSelectionChange)=\"onSelectionChange(location)\"\n      [ngClass]=\"{'hide-autocomplete': !showAutocomplete}\">\n      {{ getDisplayName(location) }}\n      </mat-option>\n      <mat-option *ngIf=\"!(locationSource$ | async)?.length && showAutocomplete\">{{ 'No results found' }}</mat-option>\n    </mat-autocomplete>\n  </div>\n</div>",
                         styles: [".autocomplete__input{-webkit-appearance:none;border:2px solid #0b0c0c;border-radius:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:0;width:100%;background-color:transparent;position:relative}.autocomplete__hint{color:#b1b4b6;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{outline:#fd0 solid 3px;outline-offset:0;box-shadow:inset 0 0 0 2px}.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:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 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{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
                     }] }
         ];
@@ -4376,9 +4386,7 @@
             this.placeholderContent = '';
             this.isNoResultsShown = false;
             this.showUpdatedColor = false;
-            this.selectedPersons = [];
             this.showAutocomplete = false;
-            this.currentInputValue = '';
             this.findPersonControl = new forms.FormControl();
             this.minSearchCharacters = 2;
         }
@@ -4417,9 +4425,6 @@
                     this.findPersonControl.setValue(null);
                     this.selectedPerson = null;
                 }
-                if (changes['selectedPerson'] && changes['selectedPerson'].currentValue === '') {
-                    this.currentInputValue = '';
-                }
             };
         /**
          * @param {?} searchTerm
@@ -4430,7 +4435,6 @@
          * @return {?}
          */
             function (searchTerm) {
-                var _this = this;
                 /** @type {?} */
                 var findJudicialPeople = this.findPersonService.find({ searchTerm: searchTerm, jurisdiction: this.domain });
                 /** @type {?} */
@@ -4438,26 +4442,7 @@
                 if (searchTerm && searchTerm.length > this.minSearchCharacters) {
                     switch (this.domain) {
                         case PersonRole.JUDICIAL: {
-                            return findJudicialPeople.pipe(operators.map(( /**
-                             * @param {?} persons
-                             * @return {?}
-                             */function (persons) {
-                                /** @type {?} */
-                                var ids = _this.selectedPersons.map(( /**
-                                 * @param {?} __0
-                                 * @return {?}
-                                 */function (_a) {
-                                    var id = _a.id;
-                                    return id;
-                                }));
-                                return persons.filter(( /**
-                                 * @param {?} __0
-                                 * @return {?}
-                                 */function (_a) {
-                                    var id = _a.id;
-                                    return !ids.includes(id);
-                                }));
-                            })));
+                            return findJudicialPeople;
                         }
                         case PersonRole.ALL: {
                             return rxjs.zip(findJudicialPeople, findCaseworkersOrAdmins).pipe(operators.map(( /**
@@ -4496,7 +4481,6 @@
          * @return {?}
          */
             function (currentValue) {
-                this.currentInputValue = currentValue;
                 this.showAutocomplete = !!currentValue && (currentValue.length > this.minSearchCharacters);
             };
         /**
@@ -4516,7 +4500,7 @@
         FindPersonComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-find-person',
-                        template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findPersonGroup\"\n     [ngClass]=\"{'form-group-error': !findPersonGroup.valid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findPersonGroup && findPersonGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>You must select a name\n    </span>\n    <input id=\"inputSelectPerson\" type=\"text\" aria-label=\"select a person\" matInput\n           formControlName=\"findPersonControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           (ngModelChange)=\"updatedVal($event)\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           [value]=\"selectedPerson\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n      <mat-option *ngFor=\"let option of filteredOptions | async\"\n                  [value]=\"getDisplayName(option)\"\n                  (onSelectionChange)=\"onSelectionChange(option)\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n        {{getDisplayName(option)}}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && currentInputValue.length && !(filteredOptions | async)?.length && showAutocomplete\">{{ 'No results found' }}</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
+                        template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findPersonGroup\"\n     [ngClass]=\"{'form-group-error': !findPersonGroup.valid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findPersonGroup && findPersonGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>You must select a name\n    </span>\n    <input id=\"inputSelectPerson\" type=\"text\" aria-label=\"select a person\" matInput\n           formControlName=\"findPersonControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           (ngModelChange)=\"updatedVal($event)\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           [value]=\"selectedPerson\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n      <mat-option *ngFor=\"let option of filteredOptions | async\"\n                  [value]=\"getDisplayName(option)\"\n                  (onSelectionChange)=\"onSelectionChange(option)\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n        {{getDisplayName(option)}}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && !(filteredOptions | async)?.length && showAutocomplete\">{{ 'No results found' }}</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
                         styles: [".mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}.hide-autocomplete{display:none}"]
                     }] }
         ];
@@ -4539,8 +4523,7 @@
             userIncluded: [{ type: i0.Input }],
             placeholderContent: [{ type: i0.Input }],
             isNoResultsShown: [{ type: i0.Input }],
-            showUpdatedColor: [{ type: i0.Input }],
-            selectedPersons: [{ type: i0.Input }]
+            showUpdatedColor: [{ type: i0.Input }]
         };
         return FindPersonComponent;
     }());