@hmcts/media-viewer/esm2022/lib/shared/gov-uk-date/gov-uk-date.component.mjs

Media Viewer

import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "../gov-uk-error-message/gov-uk-error-message.component";
import * as i4 from "../gov-uk-fieldset/gov-uk-fieldset.component";
import * as i5 from "../gov-uk-label/gov-uk-label.component";
/*
* Gov UK Date Component
* Responsible for displaying 3 input fields:
* day / month / year
* displaying errorMessage messages
* */
export class GovUkDateComponent {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GovUkDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: { config: "config", errorMessage: "errorMessage", formGroup: "formGroup" }, ngImport: i0, template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage.isInvalid\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-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          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            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'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            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'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.GovUkErrorMessageComponent, selector: " mv-gov-uk-error-message", inputs: ["config", "errorMessage"] }, { kind: "component", type: i4.GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "component", type: i5.GovUkLabelComponent, selector: "mv-gov-label", inputs: ["config"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GovUkDateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mv-gov-uk-date', template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage.isInvalid\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-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          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            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'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            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'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n" }]
        }], propDecorators: { config: [{
                type: Input
            }], errorMessage: [{
                type: Input
            }], formGroup: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ292LXVrLWRhdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWVkaWEtdmlld2VyL3NyYy9saWIvc2hhcmVkL2dvdi11ay1kYXRlL2dvdi11ay1kYXRlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21lZGlhLXZpZXdlci9zcmMvbGliL3NoYXJlZC9nb3YtdWstZGF0ZS9nb3YtdWstZGF0ZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQUMvQzs7Ozs7SUFLSTtBQUtKLE1BQU0sT0FBTyxrQkFBa0I7a0lBQWxCLGtCQUFrQjtzSEFBbEIsa0JBQWtCLDBJQ1gvQix5K0ZBK0ZBOzs0RkRwRmEsa0JBQWtCO2tCQUo5QixTQUFTOytCQUNFLGdCQUFnQjs4QkFJakIsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG4vKlxuKiBHb3YgVUsgRGF0ZSBDb21wb25lbnRcbiogUmVzcG9uc2libGUgZm9yIGRpc3BsYXlpbmcgMyBpbnB1dCBmaWVsZHM6XG4qIGRheSAvIG1vbnRoIC8geWVhclxuKiBkaXNwbGF5aW5nIGVycm9yTWVzc2FnZSBtZXNzYWdlc1xuKiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbXYtZ292LXVrLWRhdGUnLFxudGVtcGxhdGVVcmw6ICcuL2dvdi11ay1kYXRlLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBHb3ZVa0RhdGVDb21wb25lbnQge1xuICBASW5wdXQoKSBjb25maWc6IHsgaWQ6IHN0cmluZzsgbGVnZW5kOiBzdHJpbmcgfTtcbiAgQElucHV0KCkgZXJyb3JNZXNzYWdlOiB7aXNJbnZhbGlkOiBib29sZWFuOyBtZXNzYWdlczogc3RyaW5nW119O1xuICBASW5wdXQoKSBmb3JtR3JvdXA7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiZ292dWstZm9ybS1ncm91cFwiXG4gIFtuZ0NsYXNzXT1cInsgJ2dvdnVrLWZvcm0tZ3JvdXAtLWVycm9yJzogZXJyb3JNZXNzYWdlPy5pc0ludmFsaWQgfVwiXG4gIFtmb3JtR3JvdXBdPVwiZm9ybUdyb3VwXCJcbj5cbiAgPG12LWdvdi11ay1maWVsZHNldFxuICAgIFtjb25maWddPVwie1xuICAgICAgbGVnZW5kOiBjb25maWcubGVnZW5kLFxuICAgICAgY2xhc3NlczogJ2dvdnVrLWxhYmVsLS1tJyxcbiAgICAgIGlkOiBjb25maWcuaWQsXG4gICAgICBoaW50OiAnIEZvciBleGFtcGxlLCAxMiAxMSAyMDA3J1xuICAgIH1cIlxuICAgIFtpc0hlYWRpbmddPVwiZmFsc2VcIlxuICAgIFtlcnJvck1lc3NhZ2VdPVwiZXJyb3JNZXNzYWdlXCJcbiAgPlxuICAgIDxtdi1nb3YtdWstZXJyb3ItbWVzc2FnZVxuICAgICAgW2NvbmZpZ109XCJ7IGlkOiAncGFzc3BvcnQnIH1cIlxuICAgICAgKm5nSWY9XCJlcnJvck1lc3NhZ2UuaXNJbnZhbGlkXCJcbiAgICAgIFtlcnJvck1lc3NhZ2VdPVwiZXJyb3JNZXNzYWdlXCJcbiAgICA+XG4gICAgPC9tdi1nb3YtdWstZXJyb3ItbWVzc2FnZT5cblxuICAgIDxkaXYgY2xhc3M9XCJnb3Z1ay1kYXRlLWlucHV0XCIgW2lkXT1cImNvbmZpZy5pZCArICctZGF0ZSdcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJnb3Z1ay1kYXRlLWlucHV0X19pdGVtXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJnb3Z1ay1mb3JtLWdyb3VwXCI+XG4gICAgICAgICAgPG12LWdvdi1sYWJlbFxuICAgICAgICAgICAgW2NvbmZpZ109XCJ7XG4gICAgICAgICAgICAgIGxhYmVsOiAnRGF5JyxcbiAgICAgICAgICAgICAgbmFtZTogY29uZmlnLmlkLFxuICAgICAgICAgICAgICBpZDogY29uZmlnLmlkICsgJy1kYXknLFxuICAgICAgICAgICAgICBjbGFzc2VzOiAnZ292dWstZGF0ZS1pbnB1dF9fbGFiZWwnXG4gICAgICAgICAgICB9XCJcbiAgICAgICAgICA+XG4gICAgICAgICAgPC9tdi1nb3YtbGFiZWw+XG4gICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICBjbGFzcz1cImdvdnVrLWlucHV0IGdvdnVrLWRhdGUtaW5wdXRfX2lucHV0IGdvdnVrLWlucHV0LS13aWR0aC0yXCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsgJ2dvdnVrLWlucHV0LS1lcnJvcic6IGVycm9yTWVzc2FnZT8uaXNJbnZhbGlkIH1cIlxuICAgICAgICAgICAgW2lkXT1cImNvbmZpZy5pZCArICctZGF5J1wiXG4gICAgICAgICAgICBbbmFtZV09XCJjb25maWcuaWQgKyAnLWRheSdcIlxuICAgICAgICAgICAgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgICB2YWx1ZT1cIlwiXG4gICAgICAgICAgICBwYXR0ZXJuPVwiWzAtOV0qXCJcbiAgICAgICAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiJ2RheSdcIlxuICAgICAgICAgIC8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiZ292dWstZGF0ZS1pbnB1dF9faXRlbVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ292dWstZm9ybS1ncm91cFwiPlxuICAgICAgICAgIDxtdi1nb3YtbGFiZWxcbiAgICAgICAgICAgIFtjb25maWddPVwie1xuICAgICAgICAgICAgICBsYWJlbDogJ01vbnRoJyxcbiAgICAgICAgICAgICAgbmFtZTogY29uZmlnLmlkICsgJy1tb250aCcsXG4gICAgICAgICAgICAgIGlkOiBjb25maWcuaWQgKyAnLW1vbnRoJyxcbiAgICAgICAgICAgICAgY2xhc3NlczogJ2dvdnVrLWRhdGUtaW5wdXRfX2xhYmVsJ1xuICAgICAgICAgICAgfVwiXG4gICAgICAgICAgPlxuICAgICAgICAgIDwvbXYtZ292LWxhYmVsPlxuICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgY2xhc3M9XCJnb3Z1ay1pbnB1dCBnb3Z1ay1kYXRlLWlucHV0X19pbnB1dCBnb3Z1ay1pbnB1dC0td2lkdGgtMlwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7ICdnb3Z1ay1pbnB1dC0tZXJyb3InOiBlcnJvck1lc3NhZ2U/LmlzSW52YWxpZCB9XCJcbiAgICAgICAgICAgIFtpZF09XCJjb25maWcuaWQgKyAnLW1vbnRoJ1wiXG4gICAgICAgICAgICBbbmFtZV09XCJjb25maWcuaWQgKyAnLW1vbnRoJ1wiXG4gICAgICAgICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgICAgIHZhbHVlPVwiXCJcbiAgICAgICAgICAgIHBhdHRlcm49XCJbMC05XSpcIlxuICAgICAgICAgICAgW2Zvcm1Db250cm9sTmFtZV09XCInbW9udGgnXCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImdvdnVrLWRhdGUtaW5wdXRfX2l0ZW1cIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdvdnVrLWZvcm0tZ3JvdXBcIj5cbiAgICAgICAgICA8bXYtZ292LWxhYmVsXG4gICAgICAgICAgICBbY29uZmlnXT1cIntcbiAgICAgICAgICAgICAgbGFiZWw6ICdZZWFyJyxcbiAgICAgICAgICAgICAgbmFtZTogY29uZmlnLmlkICsgJy15ZWFyJyxcbiAgICAgICAgICAgICAgaWQ6IGNvbmZpZy5pZCArICcteWVhcicsXG4gICAgICAgICAgICAgIGNsYXNzZXM6ICdnb3Z1ay1kYXRlLWlucHV0X19sYWJlbCdcbiAgICAgICAgICAgIH1cIlxuICAgICAgICAgID5cbiAgICAgICAgICA8L212LWdvdi1sYWJlbD5cbiAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgIGNsYXNzPVwiZ292dWstaW5wdXQgZ292dWstZGF0ZS1pbnB1dF9faW5wdXQgZ292dWstaW5wdXQtLXdpZHRoLTRcIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwieyAnZ292dWstaW5wdXQtLWVycm9yJzogZXJyb3JNZXNzYWdlPy5pc0ludmFsaWQgfVwiXG4gICAgICAgICAgICBbaWRdPVwiY29uZmlnLmlkICsgJy15ZWFyJ1wiXG4gICAgICAgICAgICBbbmFtZV09XCJjb25maWcuaWQgKyAnLXllYXInXCJcbiAgICAgICAgICAgIHR5cGU9XCJudW1iZXJcIlxuICAgICAgICAgICAgdmFsdWU9XCJcIlxuICAgICAgICAgICAgcGF0dGVybj1cIlswLTldKlwiXG4gICAgICAgICAgICBbZm9ybUNvbnRyb2xOYW1lXT1cIid5ZWFyJ1wiXG4gICAgICAgICAgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9tdi1nb3YtdWstZmllbGRzZXQ+XG48L2Rpdj5cbiJdfQ==