govuk-angular
Version:
Angular components port of govuk-frontend nunjucks macros.
200 lines (180 loc) • 15.5 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { emptyFieldSet, emptyLegend } from '../fieldset/fieldset';
import { emptyHint } from '../hint/hint';
import { emptyErrorMessage } from '../error/error-message.model';
import * as i0 from "@angular/core";
import * as i1 from "../fieldset/fieldset.component";
import * as i2 from "../input/link-action.component";
import * as i3 from "@angular/forms";
/**
*
* ```javascript
* <govuk-date-input
* [id]="'start-date'"
* [legend]="{
* text: 'Start Date',
* classes: 'govuk-fieldset__legend--s'
* }"
* [hint]="{ text: 'For example, 27 03 2020' }"
* [model]="startDateInput"
* [linkAction]="{ text:'Use today\'s date', action: setStartDateToToday, id: 'use-todays-date' } " >
* </govuk-date-input>
*```
*/
export class GovUKDateInputComponent {
constructor(el) {
this.el = el;
this.hint = emptyHint();
/** { text: string; classes: string; } */
this.errorMessage = emptyErrorMessage();
/**
* ``` javascript
* export interface DateInput {
* day: number | string;
* month: number | string;
* year: number | string;
* }
*```
*/
this.model = { day: "", month: "", year: "" };
this.modelChange = new EventEmitter();
this.fieldset = emptyFieldSet();
this.legend = emptyLegend();
/** Can be use to set the input value on clicking the link */
this.linkAction = { text: '', action: null };
}
}
GovUKDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKDateInputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
GovUKDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKDateInputComponent, selector: "govuk-date-input", inputs: { id: "id", name: "name", classes: "classes", describeBy: "describeBy", hint: "hint", errorMessage: "errorMessage", model: "model", fieldset: "fieldset", legend: "legend", linkAction: "linkAction" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: `
<govuk-fieldset [id]="id"
[fieldset]="fieldset"
[legend]="legend"
[hint]="hint"
[errorMessage]="errorMessage">
<div class="govuk-date-input" id="{{id}}-date-input">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="{{id}}-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2"
[(ngModel)]="model.day"
maxlength="2"
id="{{id}}-day"
name="{{id}}-day"
type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="{{id}}-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2"
[(ngModel)]="model.month"
maxlength="2"
id="{{id}}-month"
name="{{id}}-month"
type="text"
inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="{{id}}-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4"
[(ngModel)]="model.year"
maxlength="4"
id="{{id}}-year"
name="{{id}}-year"
type="text"
inputmode="numeric">
</div>
</div>
</div>
<govuk-link-action [id]="id" [linkAction]="linkAction"></govuk-link-action>
</govuk-fieldset>
`, isInline: true, components: [{ type: i1.GovUKFieldsetComponent, selector: "govuk-fieldset", inputs: ["id", "fieldset", "legend", "hint", "errorMessage"] }, { type: i2.GovUKLinkActionComponent, selector: "govuk-link-action", inputs: ["id", "linkAction"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKDateInputComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-date-input',
template: `
<govuk-fieldset [id]="id"
[fieldset]="fieldset"
[legend]="legend"
[hint]="hint"
[errorMessage]="errorMessage">
<div class="govuk-date-input" id="{{id}}-date-input">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="{{id}}-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2"
[(ngModel)]="model.day"
maxlength="2"
id="{{id}}-day"
name="{{id}}-day"
type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="{{id}}-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2"
[(ngModel)]="model.month"
maxlength="2"
id="{{id}}-month"
name="{{id}}-month"
type="text"
inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="{{id}}-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4"
[(ngModel)]="model.year"
maxlength="4"
id="{{id}}-year"
name="{{id}}-year"
type="text"
inputmode="numeric">
</div>
</div>
</div>
<govuk-link-action [id]="id" [linkAction]="linkAction"></govuk-link-action>
</govuk-fieldset>
`
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
type: Input
}], name: [{
type: Input
}], classes: [{
type: Input
}], describeBy: [{
type: Input
}], hint: [{
type: Input
}], errorMessage: [{
type: Input
}], model: [{
type: Input
}], modelChange: [{
type: Output
}], fieldset: [{
type: Input
}], legend: [{
type: Input
}], linkAction: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9nb3Z1ay1hbmd1bGFyL3NyYy9saWIvZGF0ZS1pbnB1dC9kYXRlLWlucHV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2xGLE9BQU8sRUFBRSxhQUFhLEVBQUUsV0FBVyxFQUFvQixNQUFNLHNCQUFzQixDQUFDO0FBRXBGLE9BQU8sRUFBRSxTQUFTLEVBQVEsTUFBTSxjQUFjLENBQUM7QUFDL0MsT0FBTyxFQUFFLGlCQUFpQixFQUFnQixNQUFNLDhCQUE4QixDQUFDOzs7OztBQUkvRTs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQWtFSCxNQUFNLE9BQU8sdUJBQXVCO0lBOEJsQyxZQUFtQixFQUFjO1FBQWQsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQXhCeEIsU0FBSSxHQUFTLFNBQVMsRUFBRSxDQUFDO1FBRWxDLHlDQUF5QztRQUNoQyxpQkFBWSxHQUFpQixpQkFBaUIsRUFBRSxDQUFDO1FBRTFEOzs7Ozs7OztXQVFHO1FBQ00sVUFBSyxHQUFjLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLElBQUksRUFBRSxFQUFFLEVBQUMsQ0FBQztRQUVsRCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFFdkMsYUFBUSxHQUFhLGFBQWEsRUFBRSxDQUFDO1FBQ3JDLFdBQU0sR0FBVyxXQUFXLEVBQUUsQ0FBQztRQUV4Qyw4REFBOEQ7UUFDckQsZUFBVSxHQUFlLEVBQUUsSUFBSSxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUM7SUFFeEIsQ0FBQzs7b0hBOUIzQix1QkFBdUI7d0dBQXZCLHVCQUF1QixpVEEvRHhCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBNkRYOzJGQUVZLHVCQUF1QjtrQkFqRW5DLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBNkRYO2lCQUNBO2lHQUVVLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUcsSUFBSTtzQkFBWixLQUFLO2dCQUdHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBV0csS0FBSztzQkFBYixLQUFLO2dCQUVJLFdBQVc7c0JBQXBCLE1BQU07Z0JBRUUsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBR0csVUFBVTtzQkFBbEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGVtcHR5RmllbGRTZXQsIGVtcHR5TGVnZW5kLCBGaWVsZHNldCwgTGVnZW5kIH0gZnJvbSAnLi4vZmllbGRzZXQvZmllbGRzZXQnO1xuaW1wb3J0IHsgR292VUtEYXRhQ2FwdHVyZSB9IGZyb20gJy4uL2RhdGEtY2FwdHVyZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgZW1wdHlIaW50LCBIaW50IH0gZnJvbSAnLi4vaGludC9oaW50JztcbmltcG9ydCB7IGVtcHR5RXJyb3JNZXNzYWdlLCBFcnJvck1lc3NhZ2UgfSBmcm9tICcuLi9lcnJvci9lcnJvci1tZXNzYWdlLm1vZGVsJztcbmltcG9ydCB7IExpbmtBY3Rpb24gfSBmcm9tICcuLi9pbnB1dC9saW5rLWFjdGlvbic7XG5cblxuLyoqXG4gKlxuICogYGBgamF2YXNjcmlwdFxuICogICA8Z292dWstZGF0ZS1pbnB1dFxuICogICAgIFtpZF09XCInc3RhcnQtZGF0ZSdcIlxuICogICAgIFtsZWdlbmRdPVwie1xuICogICAgICAgdGV4dDogJ1N0YXJ0IERhdGUnLFxuICogICAgICAgY2xhc3NlczogJ2dvdnVrLWZpZWxkc2V0X19sZWdlbmQtLXMnXG4gKiAgICAgfVwiXG4gKiAgICAgW2hpbnRdPVwieyB0ZXh0OiAnRm9yIGV4YW1wbGUsIDI3IDAzIDIwMjAnIH1cIlxuICogICAgIFttb2RlbF09XCJzdGFydERhdGVJbnB1dFwiXG4gKiAgICAgW2xpbmtBY3Rpb25dPVwieyB0ZXh0OidVc2UgdG9kYXlcXCdzIGRhdGUnLCBhY3Rpb246IHNldFN0YXJ0RGF0ZVRvVG9kYXksIGlkOiAndXNlLXRvZGF5cy1kYXRlJyB9IFwiID5cbiAqICAgPC9nb3Z1ay1kYXRlLWlucHV0PlxuICpgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ292dWstZGF0ZS1pbnB1dCcsXG4gIHRlbXBsYXRlOiBgXG48Z292dWstZmllbGRzZXQgW2lkXT1cImlkXCJcbiAgICAgICAgICAgICAgICBbZmllbGRzZXRdPVwiZmllbGRzZXRcIlxuICAgICAgICAgICAgICAgIFtsZWdlbmRdPVwibGVnZW5kXCJcbiAgICAgICAgICAgICAgICBbaGludF09XCJoaW50XCJcbiAgICAgICAgICAgICAgICBbZXJyb3JNZXNzYWdlXT1cImVycm9yTWVzc2FnZVwiPlxuICAgICAgPGRpdiBjbGFzcz1cImdvdnVrLWRhdGUtaW5wdXRcIiBpZD1cInt7aWR9fS1kYXRlLWlucHV0XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJnb3Z1ay1kYXRlLWlucHV0X19pdGVtXCI+XG5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZ292dWstZm9ybS1ncm91cFwiPlxuXG4gICAgICAgICAgICA8bGFiZWwgY2xhc3M9XCJnb3Z1ay1sYWJlbCBnb3Z1ay1kYXRlLWlucHV0X19sYWJlbFwiIGZvcj1cInt7aWR9fS1kYXlcIj5cbiAgICAgICAgICAgICAgRGF5XG4gICAgICAgICAgICA8L2xhYmVsPlxuXG4gICAgICAgICAgICA8aW5wdXQgY2xhc3M9XCJnb3Z1ay1pbnB1dCBnb3Z1ay1kYXRlLWlucHV0X19pbnB1dCBnb3Z1ay1pbnB1dC0td2lkdGgtMlwiXG4gICAgICAgICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJtb2RlbC5kYXlcIlxuICAgICAgICAgICAgICAgICAgIG1heGxlbmd0aD1cIjJcIlxuICAgICAgICAgICAgICAgICAgIGlkPVwie3tpZH19LWRheVwiXG4gICAgICAgICAgICAgICAgICAgbmFtZT1cInt7aWR9fS1kYXlcIlxuICAgICAgICAgICAgICAgICAgIHR5cGU9XCJ0ZXh0XCIgaW5wdXRtb2RlPVwibnVtZXJpY1wiPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ292dWstZGF0ZS1pbnB1dF9faXRlbVwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJnb3Z1ay1mb3JtLWdyb3VwXCI+XG4gICAgICAgICAgICA8bGFiZWwgY2xhc3M9XCJnb3Z1ay1sYWJlbCBnb3Z1ay1kYXRlLWlucHV0X19sYWJlbFwiIGZvcj1cInt7aWR9fS1tb250aFwiPlxuICAgICAgICAgICAgICBNb250aFxuICAgICAgICAgICAgPC9sYWJlbD5cblxuICAgICAgICAgICAgPGlucHV0IGNsYXNzPVwiZ292dWstaW5wdXQgZ292dWstZGF0ZS1pbnB1dF9faW5wdXQgZ292dWstaW5wdXQtLXdpZHRoLTJcIlxuICAgICAgICAgICAgICAgICAgIFsobmdNb2RlbCldPVwibW9kZWwubW9udGhcIlxuICAgICAgICAgICAgICAgICAgIG1heGxlbmd0aD1cIjJcIlxuICAgICAgICAgICAgICAgICAgIGlkPVwie3tpZH19LW1vbnRoXCJcbiAgICAgICAgICAgICAgICAgICBuYW1lPVwie3tpZH19LW1vbnRoXCJcbiAgICAgICAgICAgICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgICAgICAgICAgaW5wdXRtb2RlPVwibnVtZXJpY1wiPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ292dWstZGF0ZS1pbnB1dF9faXRlbVwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJnb3Z1ay1mb3JtLWdyb3VwXCI+XG4gICAgICAgICAgICA8bGFiZWwgY2xhc3M9XCJnb3Z1ay1sYWJlbCBnb3Z1ay1kYXRlLWlucHV0X19sYWJlbFwiIGZvcj1cInt7aWR9fS15ZWFyXCI+XG4gICAgICAgICAgICAgIFllYXJcbiAgICAgICAgICAgIDwvbGFiZWw+XG5cbiAgICAgICAgICAgIDxpbnB1dCBjbGFzcz1cImdvdnVrLWlucHV0IGdvdnVrLWRhdGUtaW5wdXRfX2lucHV0IGdvdnVrLWlucHV0LS13aWR0aC00XCJcbiAgICAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cIm1vZGVsLnllYXJcIlxuICAgICAgICAgICAgICAgICAgIG1heGxlbmd0aD1cIjRcIlxuICAgICAgICAgICAgICAgICAgIGlkPVwie3tpZH19LXllYXJcIlxuICAgICAgICAgICAgICAgICAgIG5hbWU9XCJ7e2lkfX0teWVhclwiXG4gICAgICAgICAgICAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICAgICAgICAgICAgIGlucHV0bW9kZT1cIm51bWVyaWNcIj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8L2Rpdj5cblxuICAgICAgPC9kaXY+XG4gICAgICA8Z292dWstbGluay1hY3Rpb24gW2lkXT1cImlkXCIgW2xpbmtBY3Rpb25dPVwibGlua0FjdGlvblwiPjwvZ292dWstbGluay1hY3Rpb24+XG4gICAgPC9nb3Z1ay1maWVsZHNldD5cblxuYFxufSlcbmV4cG9ydCBjbGFzcyBHb3ZVS0RhdGVJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIEdvdlVLRGF0YUNhcHR1cmU8RGF0ZUlucHV0PiB7XG4gIEBJbnB1dCgpIGlkOiBzdHJpbmc7XG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZztcbiAgQElucHV0KCkgY2xhc3Nlczogc3RyaW5nO1xuICBASW5wdXQoKSBkZXNjcmliZUJ5Pzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIGhpbnQ6IEhpbnQgPSBlbXB0eUhpbnQoKTtcblxuICAvKiogeyB0ZXh0OiBzdHJpbmc7IGNsYXNzZXM6IHN0cmluZzsgfSAqL1xuICBASW5wdXQoKSBlcnJvck1lc3NhZ2U6IEVycm9yTWVzc2FnZSA9IGVtcHR5RXJyb3JNZXNzYWdlKCk7XG5cbiAgLyoqXG4gICAqIGBgYCBqYXZhc2NyaXB0XG4gICAqIGV4cG9ydCBpbnRlcmZhY2UgRGF0ZUlucHV0IHtcbiAgICogIGRheTogbnVtYmVyIHwgc3RyaW5nO1xuICAgKiAgbW9udGg6IG51bWJlciB8IHN0cmluZztcbiAgICogIHllYXI6IG51bWJlciB8IHN0cmluZztcbiAgICogfVxuICAgKmBgYFxuICAgKi9cbiAgQElucHV0KCkgbW9kZWw6IERhdGVJbnB1dCA9IHsgZGF5OiBcIlwiLCBtb250aDogXCJcIiwgeWVhcjogXCJcIn07XG5cbiAgQE91dHB1dCgpIG1vZGVsQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgQElucHV0KCkgZmllbGRzZXQ6IEZpZWxkc2V0ID0gZW1wdHlGaWVsZFNldCgpO1xuICBASW5wdXQoKSBsZWdlbmQ6IExlZ2VuZCA9IGVtcHR5TGVnZW5kKCk7XG5cbiAgLyoqIENhbiBiZSB1c2UgdG8gc2V0IHRoZSBpbnB1dCB2YWx1ZSBvbiBjbGlja2luZyB0aGUgbGluayAgKi9cbiAgQElucHV0KCkgbGlua0FjdGlvbjogTGlua0FjdGlvbiA9IHsgdGV4dDogJycsIGFjdGlvbjogbnVsbCB9O1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBlbDogRWxlbWVudFJlZikgeyB9XG5cbn1cblxuZXhwb3J0IGludGVyZmFjZSBEYXRlSW5wdXQge1xuICAgIGRheTogbnVtYmVyIHwgc3RyaW5nO1xuICAgIG1vbnRoOiBudW1iZXIgfCBzdHJpbmc7XG4gICAgeWVhcjogbnVtYmVyIHwgc3RyaW5nO1xufVxuXG5cbiJdfQ==