@hmcts/rpx-xui-common-lib 1.4.24-search-location-selection-accessibility-pristine-fixes → 1.4.29-date-component-common-validation

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

@@ -3762,10 +3762,6 @@
          */
             function (currentValue) {
                 this.showAutocomplete = !!currentValue && (currentValue.length >= this.minSearchCharacters);
-                if (!currentValue || !currentValue.length) {
-                    this.findLocationFormGroup.controls.locationSelectedFormControl.markAsPristine();
-                    this.findLocationFormGroup.controls.locationSelectedFormControl.reset();
-                }
                 if (this.showAutocomplete) {
                     this.filter(currentValue);
                 }
@@ -3805,8 +3801,8 @@
         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      (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      id=\"input-selected-location\">\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>\n",
-                        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:16px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:19px;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{width:50%;display:inline-block;margin-right:4px}#input-selected-location{line-height:24px;font-size:13px}"]
+                        template: "<div class=\"auto-complete-container\">\n  <div class=\"autocomplete__wrapper\">                \n    <input                             \n      [formControl]=\"findLocationFormGroup.controls.findLocationFormControl\"\n      [matAutocomplete]=\"auto\"\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      id=\"input-selected-location\">\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-autocomplete>\n  </div>\n</div>\n",
+                        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:16px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:19px;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{width:50%;display:inline-block;margin-right:4px}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3822,8 +3818,7 @@
             locationType: [{ type: i0.Input }],
             selectedLocations$: [{ type: i0.Input }],
             serviceIds: [{ type: i0.Input }],
-            submitted: [{ type: i0.Input }],
-            locations$: [{ type: i0.Input }]
+            submitted: [{ type: i0.Input }]
         };
         return SearchLocationComponent;
     }());
@@ -4544,11 +4539,11 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /*
-    * Gov UK Date Component
-    * Responsible for displaying 3 input fields:
-    * day / month / year
-    * displaying errorMessage messages
-    * */
+     * Gov UK Date Component
+     * Responsible for displaying 3 input fields:
+     * day / month / year
+     * displaying errorMessage messages
+     * */
     var GovUkDateComponent = /** @class */ (function () {
         function GovUkDateComponent() {
         }
@@ -4559,17 +4554,72 @@
          * @return {?}
          */
             function () {
+                this.day = this.config.id + "_day";
+                this.month = this.config.id + "_month";
+                this.year = this.config.id + "_year";
+                /** @type {?} */
+                var dateValidator = this.DateValidator();
+                this.formGroup.get(this.day).setValidators(dateValidator);
+            };
+        /**
+         * @private
+         * @param {?} d
+         * @param {?} month
+         * @return {?}
+         */
+        GovUkDateComponent.prototype.isValidDate = /**
+         * @private
+         * @param {?} d
+         * @param {?} month
+         * @return {?}
+         */
+            function (d, month) {
+                /** @type {?} */
+                var dateCheck = d instanceof Date && !isNaN(d.getTime());
+                /** @type {?} */
+                var leapYearCheck = d.getMonth() === month;
+                return dateCheck && leapYearCheck;
+            };
+        /**
+         * @return {?}
+         */
+        GovUkDateComponent.prototype.DateValidator = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                /** @type {?} */
+                var res = ( /**
+                 * @return {?}
+                 */function () {
+                    /** @type {?} */
+                    var day = _this.formGroup.get(_this.day).value;
+                    /** @type {?} */
+                    var month = _this.formGroup.get(_this.month).value - 1;
+                    /** @type {?} */
+                    var year = _this.formGroup.get(_this.year).value;
+                    /** @type {?} */
+                    var isValid = _this.isValidDate(new Date(year, month, day), month);
+                    if (!isValid) {
+                        return { isValid: false, errorType: 'DATE_VALIDATION_FAILED' };
+                    }
+                    else {
+                        return;
+                    }
+                });
+                return res;
             };
         GovUkDateComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-gov-uk-date',
-                        template: "<div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\" [formGroup]=\"formGroup\">\n  <div class=\"date-input-container\">\n    <xuilib-gov-uk-fieldset\n      [config]=\"{\n        legend: config.label || 'Date component',\n        classes: config.classes || 'govuk-label--m',\n        id: config.id,\n        hint: config.hint != null ? config.hint : 'For example, 12 11 2007',\n        isPageHeading: config.isPageHeading || false}\"\n      [errorMessage]=\"errorMessage\">\n      <xuilib-gov-uk-error-message\n        [config]=\"{id: 'passport'}\"\n        *ngIf=\"errorMessage\"\n        [errorMessage]=\"errorMessage\">\n      </xuilib-gov-uk-error-message>\n\n      <div class=\"govuk-date-input\" [id]=\"config.id+'-date'\">\n        <div class=\"govuk-date-input__item\">\n          <div class=\"govuk-form-group\">\n            <xuilib-gov-label\n              [config]=\"{label: 'Day', name: config.id+'-day', id: config.id+'-day', classes: 'govuk-date-input__label'}\">\n            </xuilib-gov-label>\n            <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n                   [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n                   [id]=\"config.id\"\n                   [name]=\"config.id+'-day'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n                   [formControlName]=\"config.id+'_day'\">\n          </div>\n        </div>\n        <div class=\"govuk-date-input__item\">\n          <div class=\"govuk-form-group\">\n            <xuilib-gov-label\n              [config]=\"{label: 'Month', name: config.id+'-month', id: config.id+'-month', classes: 'govuk-date-input__label'}\">\n            </xuilib-gov-label>\n            <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n                   [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n                   [id]=\"config.id+'-month'\"\n                   [name]=\"config.id+'-month'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n                   [formControlName]=\"config.id+'_month'\">\n          </div>\n        </div>\n        <div class=\"govuk-date-input__item\">\n          <div class=\"govuk-form-group\">\n            <xuilib-gov-label\n              [config]=\"{label: 'Year', name: config.id+'-year', id: config.id+'-year', classes: 'govuk-date-input__label'}\">\n            </xuilib-gov-label>\n            <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n                   [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n                   [id]=\"config.id+'-year'\"\n                   [name]=\"config.id+'-year'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n                   [formControlName]=\"config.id+'_year'\">\n          </div>\n        </div>\n      </div>\n    </xuilib-gov-uk-fieldset>\n  </div>\n</div>\n",
+                        template: "<div #form=\"ngForm\" class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\" [formGroup]=\"formGroup\">\n  <div class=\"date-input-container\">\n    <xuilib-gov-uk-fieldset\n      [config]=\"{\n        legend: config.label || 'Date component',\n        classes: config.classes || 'govuk-label--m',\n        id: config.id,\n        hint: config.hint != null ? config.hint : 'For example, 12 11 2007',\n        isPageHeading: config.isPageHeading || false}\"\n      [errorMessage]=\"errorMessage\">\n      <xuilib-gov-uk-error-message\n        [config]=\"{id: 'passport'}\"\n        *ngIf=\"errorMessage\"\n        [errorMessage]=\"errorMessage\">\n      </xuilib-gov-uk-error-message>\n      <div class=\"govuk-date-input\" [id]=\"config.id+'-date'\">\n        <div class=\"govuk-date-input__item\">\n          <div class=\"govuk-form-group\">\n            <xuilib-gov-label\n              [config]=\"{label: 'Day', name: config.id+'-day', id: config.id+'-day', classes: 'govuk-date-input__label'}\">\n            </xuilib-gov-label>\n            <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n                   [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n                   [id]=\"config.id\"\n                   [name]=\"config.id+'-day'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n                   [formControlName]=\"config.id+'_day'\">\n          </div>\n        </div>\n        <div class=\"govuk-date-input__item\">\n          <div class=\"govuk-form-group\">\n            <xuilib-gov-label\n              [config]=\"{label: 'Month', name: config.id+'-month', id: config.id+'-month', classes: 'govuk-date-input__label'}\">\n            </xuilib-gov-label>\n            <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n                   [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n                   [id]=\"config.id+'-month'\"\n                   [name]=\"config.id+'-month'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n                   [formControlName]=\"config.id+'_month'\">\n          </div>\n        </div>\n        <div class=\"govuk-date-input__item\">\n          <div class=\"govuk-form-group\">\n            <xuilib-gov-label\n              [config]=\"{label: 'Year', name: config.id+'-year', id: config.id+'-year', classes: 'govuk-date-input__label'}\">\n            </xuilib-gov-label>\n            <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n                   [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n                   [id]=\"config.id+'-year'\"\n                   [name]=\"config.id+'-year'\" type=\"number\" value=\"\" pattern=\"[0-9]*\"\n                   [formControlName]=\"config.id+'_year'\">\n          </div>\n        </div>\n      </div>\n    </xuilib-gov-uk-fieldset>\n  </div>\n</div>\n",
                         styles: [".govuk-form-group .date-input-container{margin-bottom:30px}.govuk-form-group .date-input-container .govuk-date-input .govuk-date-input__item .govuk-form-group{margin-bottom:0}"]
                     }] }
         ];
         /** @nocollapse */
         GovUkDateComponent.ctorParameters = function () { return []; };
         GovUkDateComponent.propDecorators = {
+            form: [{ type: i0.ViewChild, args: ['form',] }],
             config: [{ type: i0.Input }],
             errorMessage: [{ type: i0.Input }],
             formGroup: [{ type: i0.Input }]