govuk-angular/esm2020/lib/input/input.component.mjs

Angular components port of govuk-frontend nunjucks macros.

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { emptyLabel } from '../label/label';
import { emptyHint } from '../hint/hint';
import { emptyErrorMessage } from '../error/error-message.model';
import * as i0 from "@angular/core";
import * as i1 from "../field/field.component";
import * as i2 from "./link-action.component";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/common";
/**
 * Input component with error handling.
 *
 * ```javascript
 *    <govuk-input [id]="'with-date-fill'"
 *                 [(model)]="model.date"
 *                 [label]="{text:'What is the date today?', classes: 'govuk-label--m'}"
 *                 [linkAction]="{ text:'Use todays date', action: today } "
 *                 [hint]="{ text: 'Try the link below '}"
 *                 [classes]="'govuk-input--width-10'"
 *                 maxlength="10"></govuk-input>
 * ```
 */
export class GovUKInputComponent {
    constructor() {
        this.label = emptyLabel();
        this.hint = emptyHint();
        this.errorMessage = emptyErrorMessage();
        this.modelChange = new EventEmitter();
        this.onInputBlur = new EventEmitter();
        this.onInputFocus = new EventEmitter();
        this.onInputSubmit = new EventEmitter();
        this.onInputScroll = new EventEmitter();
        this.maxlength = 50;
        /** Can be use to set the input value on clicking the link  */
        this.linkAction = { text: '', action: null };
    }
}
GovUKInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKInputComponent, selector: "govuk-input", inputs: { id: "id", name: "name", classes: "classes", type: "type", describeBy: "describeBy", label: "label", hint: "hint", errorMessage: "errorMessage", model: "model", maxlength: "maxlength", linkAction: "linkAction" }, outputs: { modelChange: "modelChange", onInputBlur: "onInputBlur", onInputFocus: "onInputFocus", onInputSubmit: "onInputSubmit", onInputScroll: "onInputScroll" }, ngImport: i0, template: `
<govuk-field [id]="id" [label]="label" [hint]="hint" [errorMessage]="errorMessage">

  <input  [id]="id"
          [attr.name]="name || id"
          class="govuk-input {{classes}}"
          [ngClass]="{'govuk-input--error' : errorMessage.text}"
          [attr.aria-describedby]="describeBy"
          [attr.maxlength]="maxlength"
          [attr.type]="type"
          [(ngModel)]="model"
          (ngModelChange)="modelChange.emit($event)" 
          (focus)="onInputFocus.emit($event)"
          (blur)="onInputBlur.emit($event)"
          (submit)="onInputSubmit.emit($event)"
          (scroll)="onInputScroll.emit($event)">

  <govuk-link-action [id]="id"  [linkAction]="linkAction"></govuk-link-action>

<govuk-field>
`, isInline: true, components: [{ type: i1.GovUKFieldComponent, selector: "govuk-field", inputs: ["id", "name", "classes", "hint", "errorMessage", "label"] }, { 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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: GovUKInputComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'govuk-input',
                    template: `
<govuk-field [id]="id" [label]="label" [hint]="hint" [errorMessage]="errorMessage">

  <input  [id]="id"
          [attr.name]="name || id"
          class="govuk-input {{classes}}"
          [ngClass]="{'govuk-input--error' : errorMessage.text}"
          [attr.aria-describedby]="describeBy"
          [attr.maxlength]="maxlength"
          [attr.type]="type"
          [(ngModel)]="model"
          (ngModelChange)="modelChange.emit($event)" 
          (focus)="onInputFocus.emit($event)"
          (blur)="onInputBlur.emit($event)"
          (submit)="onInputSubmit.emit($event)"
          (scroll)="onInputScroll.emit($event)">

  <govuk-link-action [id]="id"  [linkAction]="linkAction"></govuk-link-action>

<govuk-field>
`
                }]
        }], propDecorators: { id: [{
                type: Input
            }], name: [{
                type: Input
            }], classes: [{
                type: Input
            }], type: [{
                type: Input
            }], describeBy: [{
                type: Input
            }], label: [{
                type: Input
            }], hint: [{
                type: Input
            }], errorMessage: [{
                type: Input
            }], model: [{
                type: Input
            }], modelChange: [{
                type: Output
            }], onInputBlur: [{
                type: Output
            }], onInputFocus: [{
                type: Output
            }], onInputSubmit: [{
                type: Output
            }], onInputScroll: [{
                type: Output
            }], maxlength: [{
                type: Input
            }], linkAction: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZ292dWstYW5ndWxhci9zcmMvbGliL2lucHV0L2lucHV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxVQUFVLEVBQVMsTUFBTSxnQkFBZ0IsQ0FBQztBQUduRCxPQUFPLEVBQUUsU0FBUyxFQUFRLE1BQU0sY0FBYyxDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBZ0IsTUFBTSw4QkFBOEIsQ0FBQzs7Ozs7O0FBQy9FOzs7Ozs7Ozs7Ozs7R0FZRztBQXlCSCxNQUFNLE9BQU8sbUJBQW1CO0lBeEJoQztRQWtDVyxVQUFLLEdBQVUsVUFBVSxFQUFFLENBQUM7UUFFNUIsU0FBSSxHQUFTLFNBQVMsRUFBRSxDQUFDO1FBQ3pCLGlCQUFZLEdBQWlCLGlCQUFpQixFQUFFLENBQUM7UUFRaEQsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBQ3pDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztRQUN4QyxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7UUFDekMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO1FBQzFDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztRQUUzQyxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBRXhCLDhEQUE4RDtRQUNyRCxlQUFVLEdBQWUsRUFBRSxJQUFJLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQztLQUc5RDs7Z0hBakNZLG1CQUFtQjtvR0FBbkIsbUJBQW1CLG9iQXRCcEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBb0JYOzJGQUVZLG1CQUFtQjtrQkF4Qi9CLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGFBQWE7b0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Q0FvQlg7aUJBQ0E7OEJBRVUsRUFBRTtzQkFBVixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBR0csSUFBSTtzQkFBWixLQUFLO2dCQUVHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQU9HLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csWUFBWTtzQkFBckIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU07Z0JBRUUsU0FBUztzQkFBakIsS0FBSztnQkFHRyxVQUFVO3NCQUFsQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGVtcHR5TGFiZWwsIExhYmVsIH0gZnJvbSAnLi4vbGFiZWwvbGFiZWwnO1xuaW1wb3J0IHsgR292VUtEYXRhQ2FwdHVyZSB9IGZyb20gJy4uL2RhdGEtY2FwdHVyZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgTGlua0FjdGlvbiB9IGZyb20gJy4vbGluay1hY3Rpb24nO1xuaW1wb3J0IHsgZW1wdHlIaW50LCBIaW50IH0gZnJvbSAnLi4vaGludC9oaW50JztcbmltcG9ydCB7IGVtcHR5RXJyb3JNZXNzYWdlLCBFcnJvck1lc3NhZ2UgfSBmcm9tICcuLi9lcnJvci9lcnJvci1tZXNzYWdlLm1vZGVsJztcbi8qKlxuICogSW5wdXQgY29tcG9uZW50IHdpdGggZXJyb3IgaGFuZGxpbmcuXG4gKlxuICogYGBgamF2YXNjcmlwdFxuICogICAgPGdvdnVrLWlucHV0IFtpZF09XCInd2l0aC1kYXRlLWZpbGwnXCJcbiAqICAgICAgICAgICAgICAgICBbKG1vZGVsKV09XCJtb2RlbC5kYXRlXCJcbiAqICAgICAgICAgICAgICAgICBbbGFiZWxdPVwie3RleHQ6J1doYXQgaXMgdGhlIGRhdGUgdG9kYXk/JywgY2xhc3NlczogJ2dvdnVrLWxhYmVsLS1tJ31cIlxuICogICAgICAgICAgICAgICAgIFtsaW5rQWN0aW9uXT1cInsgdGV4dDonVXNlIHRvZGF5cyBkYXRlJywgYWN0aW9uOiB0b2RheSB9IFwiXG4gKiAgICAgICAgICAgICAgICAgW2hpbnRdPVwieyB0ZXh0OiAnVHJ5IHRoZSBsaW5rIGJlbG93ICd9XCJcbiAqICAgICAgICAgICAgICAgICBbY2xhc3Nlc109XCInZ292dWstaW5wdXQtLXdpZHRoLTEwJ1wiXG4gKiAgICAgICAgICAgICAgICAgbWF4bGVuZ3RoPVwiMTBcIj48L2dvdnVrLWlucHV0PlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dvdnVrLWlucHV0JyxcbiAgdGVtcGxhdGU6IGBcbjxnb3Z1ay1maWVsZCBbaWRdPVwiaWRcIiBbbGFiZWxdPVwibGFiZWxcIiBbaGludF09XCJoaW50XCIgW2Vycm9yTWVzc2FnZV09XCJlcnJvck1lc3NhZ2VcIj5cblxuICA8aW5wdXQgIFtpZF09XCJpZFwiXG4gICAgICAgICAgW2F0dHIubmFtZV09XCJuYW1lIHx8IGlkXCJcbiAgICAgICAgICBjbGFzcz1cImdvdnVrLWlucHV0IHt7Y2xhc3Nlc319XCJcbiAgICAgICAgICBbbmdDbGFzc109XCJ7J2dvdnVrLWlucHV0LS1lcnJvcicgOiBlcnJvck1lc3NhZ2UudGV4dH1cIlxuICAgICAgICAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiZGVzY3JpYmVCeVwiXG4gICAgICAgICAgW2F0dHIubWF4bGVuZ3RoXT1cIm1heGxlbmd0aFwiXG4gICAgICAgICAgW2F0dHIudHlwZV09XCJ0eXBlXCJcbiAgICAgICAgICBbKG5nTW9kZWwpXT1cIm1vZGVsXCJcbiAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJtb2RlbENoYW5nZS5lbWl0KCRldmVudClcIiBcbiAgICAgICAgICAoZm9jdXMpPVwib25JbnB1dEZvY3VzLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICAgKGJsdXIpPVwib25JbnB1dEJsdXIuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgICAoc3VibWl0KT1cIm9uSW5wdXRTdWJtaXQuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgICAoc2Nyb2xsKT1cIm9uSW5wdXRTY3JvbGwuZW1pdCgkZXZlbnQpXCI+XG5cbiAgPGdvdnVrLWxpbmstYWN0aW9uIFtpZF09XCJpZFwiICBbbGlua0FjdGlvbl09XCJsaW5rQWN0aW9uXCI+PC9nb3Z1ay1saW5rLWFjdGlvbj5cblxuPGdvdnVrLWZpZWxkPlxuYFxufSlcbmV4cG9ydCBjbGFzcyBHb3ZVS0lucHV0Q29tcG9uZW50IGltcGxlbWVudHMgR292VUtEYXRhQ2FwdHVyZTxzdHJpbmc+IHtcbiAgQElucHV0KCkgaWQ6IHN0cmluZztcbiAgQElucHV0KCkgbmFtZTogc3RyaW5nO1xuICBASW5wdXQoKSBjbGFzc2VzOiBzdHJpbmc7XG5cbiAgLyoqIFR5cGUgb2YgaW5wdXQgY29udHJvbCB0byByZW5kZXIuIERlZmF1bHRzIHRvICd0ZXh0JyAqL1xuICBASW5wdXQoKSB0eXBlOiAndGV4dCc7XG5cbiAgQElucHV0KCkgZGVzY3JpYmVCeT86IHN0cmluZztcblxuICBASW5wdXQoKSBsYWJlbDogTGFiZWwgPSBlbXB0eUxhYmVsKCk7XG5cbiAgQElucHV0KCkgaGludDogSGludCA9IGVtcHR5SGludCgpO1xuICBASW5wdXQoKSBlcnJvck1lc3NhZ2U6IEVycm9yTWVzc2FnZSA9IGVtcHR5RXJyb3JNZXNzYWdlKCk7XG5cbiAgLy8gTm90IHlldCBpbXBsZW1lbnRlZFxuICAvLyBASW5wdXQoKSBwcmVmaXg6IHN0cmluZztcbiAgLy8gQElucHV0KCkgc3VmZml4OiBzdHJpbmc7XG4gIC8vIEBJbnB1dCgpIGZvcm1Hcm91cDogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIG1vZGVsOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBtb2RlbENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBAT3V0cHV0KCkgb25JbnB1dEJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgb25JbnB1dEZvY3VzID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcbiAgQE91dHB1dCgpIG9uSW5wdXRTdWJtaXQgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuICBAT3V0cHV0KCkgb25JbnB1dFNjcm9sbCA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG5cbiAgQElucHV0KCkgbWF4bGVuZ3RoID0gNTA7XG5cbiAgLyoqIENhbiBiZSB1c2UgdG8gc2V0IHRoZSBpbnB1dCB2YWx1ZSBvbiBjbGlja2luZyB0aGUgbGluayAgKi9cbiAgQElucHV0KCkgbGlua0FjdGlvbjogTGlua0FjdGlvbiA9IHsgdGV4dDogJycsIGFjdGlvbjogbnVsbCB9O1xuXG5cbn1cbiJdfQ==