govuk-angular
Version:
Angular components port of govuk-frontend nunjucks macros.
1,014 lines (928 loc) • 143 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, Directive, EventEmitter, Output, ContentChildren, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1$1 from '@angular/router';
import { RouterModule } from '@angular/router';
import { each } from 'lodash';
import { fromEvent, merge, of } from 'rxjs';
import { tap, filter, debounceTime, distinctUntilChanged, map, startWith, mapTo, delay, withLatestFrom } from 'rxjs/operators';
class GovUKLinkActionComponent {
ngOnInit() {
this.id = this.linkAction.id ? this.linkAction.id : `link-action-${this.id}`;
}
}
GovUKLinkActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKLinkActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKLinkActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKLinkActionComponent, selector: "govuk-link-action", inputs: { id: "id", linkAction: "linkAction" }, ngImport: i0, template: `
<span style="margin-top: 5px; display: block;" *ngIf="linkAction.text">
<a id="{{id}}" href="#" class="govuk-link" (click)="linkAction.action($event)">
{{linkAction.text}}
</a>
</span>
`, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKLinkActionComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-link-action',
template: `
<span style="margin-top: 5px; display: block;" *ngIf="linkAction.text">
<a id="{{id}}" href="#" class="govuk-link" (click)="linkAction.action($event)">
{{linkAction.text}}
</a>
</span>
`
}]
}], propDecorators: { id: [{
type: Input
}], linkAction: [{
type: Input
}] } });
class GovUKHintComponent {
constructor() {
this.hint = { text: '', classes: '' };
}
ngOnInit() {
if (typeof this.hint === 'string') {
const text = this.hint;
this.hint = {
text,
classes: ''
};
}
}
}
GovUKHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKHintComponent, selector: "govuk-hint", inputs: { id: "id", hint: "hint" }, ngImport: i0, template: `
<span id="hint-{{id}}" class="govuk-hint {{hint.classes}}"> {{hint.text}} </span>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKHintComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-hint',
template: `
<span id="hint-{{id}}" class="govuk-hint {{hint.classes}}"> {{hint.text}} </span>
`
}]
}], propDecorators: { id: [{
type: Input
}], hint: [{
type: Input
}] } });
class GovUKErrorComponent {
}
GovUKErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKErrorComponent, selector: "govuk-error", inputs: { id: "id", errorMessage: "errorMessage" }, ngImport: i0, template: `
<span *ngIf="errorMessage.text" id="error-{{id}}" class="govuk-error-message {{errorMessage.classes}}">
<span class="govuk-visually-hidden">Error:</span>
{{errorMessage.text}}
</span>
`, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKErrorComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-error',
template: `
<span *ngIf="errorMessage.text" id="error-{{id}}" class="govuk-error-message {{errorMessage.classes}}">
<span class="govuk-visually-hidden">Error:</span>
{{errorMessage.text}}
</span>
`
}]
}], propDecorators: { id: [{
type: Input
}], errorMessage: [{
type: Input
}] } });
class ErrorMessage {
}
const emptyErrorMessage = () => ({ text: '', classes: '' });
class Hint {
}
const emptyHint = () => ({ text: '' });
const emptyFieldSet = () => ({ classes: '', role: '' });
const emptyLegend = () => ({ text: '', classes: '', isPageHeading: false });
class GovErrorLineDirective {
constructor(el) {
this.el = el;
}
ngOnChanges(changes) {
this.el.nativeElement.className = this.toggleError();
}
/**
* @description Toggle the error class on the input element
*/
toggleError() {
const errorClass = ' govuk-form-group--error';
const target = this.el.nativeElement.className;
return this.govukErrorLine.text ? target.includes(errorClass) ? target : target.concat(errorClass) :
target.replace(errorClass, '');
}
}
GovErrorLineDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovErrorLineDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
GovErrorLineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: GovErrorLineDirective, selector: "[govukErrorLine]", inputs: { govukErrorLine: "govukErrorLine" }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovErrorLineDirective, decorators: [{
type: Directive,
args: [{
selector: '[govukErrorLine]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { govukErrorLine: [{
type: Input
}] } });
class GovUKFieldsetComponent {
constructor() {
this.fieldset = emptyFieldSet();
this.legend = emptyLegend();
this.hint = emptyHint();
this.errorMessage = emptyErrorMessage();
}
}
GovUKFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKFieldsetComponent, selector: "govuk-fieldset", inputs: { id: "id", fieldset: "fieldset", legend: "legend", hint: "hint", errorMessage: "errorMessage" }, ngImport: i0, template: `
<div [govukErrorLine]="errorMessage" class="govuk-form-group">
<fieldset class="govuk-fieldset" [attr.aria-describedby]="fieldset.describedBy">
<legend class="govuk-fieldset__legend {{legend.classes}}" id="fieldset-{{id}}">
<h1 *ngIf="legend.isPageHeading" class="govuk-fieldset__heading"> {{legend.text}} </h1>
<h2 *ngIf="!legend.isPageHeading" class="govuk-fieldset__heading"> {{legend.text}} </h2>
</legend>
<govuk-hint [id]="id" [hint]="hint"></govuk-hint>
<govuk-error [id]="id" [errorMessage]="errorMessage" ></govuk-error>
<ng-content></ng-content>
</fieldset>
</div>
`, isInline: true, components: [{ type: GovUKHintComponent, selector: "govuk-hint", inputs: ["id", "hint"] }, { type: GovUKErrorComponent, selector: "govuk-error", inputs: ["id", "errorMessage"] }], directives: [{ type: GovErrorLineDirective, selector: "[govukErrorLine]", inputs: ["govukErrorLine"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKFieldsetComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-fieldset',
template: `
<div [govukErrorLine]="errorMessage" class="govuk-form-group">
<fieldset class="govuk-fieldset" [attr.aria-describedby]="fieldset.describedBy">
<legend class="govuk-fieldset__legend {{legend.classes}}" id="fieldset-{{id}}">
<h1 *ngIf="legend.isPageHeading" class="govuk-fieldset__heading"> {{legend.text}} </h1>
<h2 *ngIf="!legend.isPageHeading" class="govuk-fieldset__heading"> {{legend.text}} </h2>
</legend>
<govuk-hint [id]="id" [hint]="hint"></govuk-hint>
<govuk-error [id]="id" [errorMessage]="errorMessage" ></govuk-error>
<ng-content></ng-content>
</fieldset>
</div>
`
}]
}], propDecorators: { id: [{
type: Input
}], fieldset: [{
type: Input
}], legend: [{
type: Input
}], hint: [{
type: Input
}], errorMessage: [{
type: Input
}] } });
class Label {
}
const emptyLabel = () => ({ text: '' });
class GovUKLabelComponent {
constructor() {
this.label = { text: '' };
}
}
GovUKLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKLabelComponent, selector: "govuk-label", inputs: { id: "id", label: "label" }, ngImport: i0, template: `
<h1 class="govuk-label-wrapper" *ngIf="label.isPageHeading">
<label class="govuk-label {{label.classes}}" id="lbl-{{id}}" [for]="id || label.for">{{label.text}}</label>
</h1>
<label *ngIf="!label.isPageHeading" class="govuk-label {{label.classes}}" id="lbl-{{id}}" for="{{id}}">{{label.text}}</label>
`, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKLabelComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'govuk-label',
template: `
<h1 class="govuk-label-wrapper" *ngIf="label.isPageHeading">
<label class="govuk-label {{label.classes}}" id="lbl-{{id}}" [for]="id || label.for">{{label.text}}</label>
</h1>
<label *ngIf="!label.isPageHeading" class="govuk-label {{label.classes}}" id="lbl-{{id}}" for="{{id}}">{{label.text}}</label>
`
}]
}], propDecorators: { id: [{
type: Input
}], label: [{
type: Input
}] } });
/**
* The Field template is a common template for field type inputs.
* The template includes the Hint Label and ErrorMessage common to a number
* of component, including, govuk-input, govuk-select and govuk-input-group
*/
class GovUKFieldComponent {
constructor() {
this.hint = emptyHint();
this.errorMessage = emptyErrorMessage();
this.label = emptyLabel();
this.hasHint = () => this.hint.text !== "";
}
}
GovUKFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKFieldComponent, selector: "govuk-field", inputs: { id: "id", name: "name", classes: "classes", hint: "hint", errorMessage: "errorMessage", label: "label" }, ngImport: i0, template: `
<div [govukErrorLine]="errorMessage" class="govuk-form-group classes">
<govuk-label [id]="id" [label]="label"></govuk-label>
<govuk-hint [id]="id" [hint]="hint" *ngIf="hasHint()"> </govuk-hint>
<govuk-error [id]="id" [errorMessage]="errorMessage"></govuk-error>
<ng-content></ng-content>
</div>
`, isInline: true, components: [{ type: GovUKLabelComponent, selector: "govuk-label", inputs: ["id", "label"] }, { type: GovUKHintComponent, selector: "govuk-hint", inputs: ["id", "hint"] }, { type: GovUKErrorComponent, selector: "govuk-error", inputs: ["id", "errorMessage"] }], directives: [{ type: GovErrorLineDirective, selector: "[govukErrorLine]", inputs: ["govukErrorLine"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKFieldComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-field',
template: `
<div [govukErrorLine]="errorMessage" class="govuk-form-group classes">
<govuk-label [id]="id" [label]="label"></govuk-label>
<govuk-hint [id]="id" [hint]="hint" *ngIf="hasHint()"> </govuk-hint>
<govuk-error [id]="id" [errorMessage]="errorMessage"></govuk-error>
<ng-content></ng-content>
</div>
`
}]
}], propDecorators: { id: [{
type: Input
}], name: [{
type: Input
}], classes: [{
type: Input
}], hint: [{
type: Input
}], errorMessage: [{
type: Input
}], label: [{
type: Input
}] } });
class GovUKLoadingBarComponent {
}
GovUKLoadingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKLoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKLoadingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKLoadingBarComponent, selector: "govuk-loading", inputs: { slId: "slId", isLoading: "isLoading" }, ngImport: i0, template: "<div *ngIf=\"isLoading\" id=\"{{slId}}\">\n\n <h4 class=\"govuk-heading-s\">Loading....</h4>\n\n <div class=\"progress-bar\">\n <span class=\"bar\">\n <span class=\"progress\"></span>\n </span>\n </div>\n\n</div>", styles: ["@keyframes loader{0%{width:0}20%{width:10%}25%{width:24%}43%{width:41%}56%{width:50%}66%{width:52%}71%{width:60%}75%{width:76%}94%{width:86%}to{width:100%}}.progress-bar{border-radius:60px;overflow:hidden;width:100%}.progress-bar span{display:block}.bar{background:govuk-colour(\"blue\")}.progress{animation:loader 8s ease infinite;background:#1d70b8;color:#fff;padding:5px;width:0}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKLoadingBarComponent, decorators: [{
type: Component,
args: [{ selector: 'govuk-loading', template: "<div *ngIf=\"isLoading\" id=\"{{slId}}\">\n\n <h4 class=\"govuk-heading-s\">Loading....</h4>\n\n <div class=\"progress-bar\">\n <span class=\"bar\">\n <span class=\"progress\"></span>\n </span>\n </div>\n\n</div>", styles: ["@keyframes loader{0%{width:0}20%{width:10%}25%{width:24%}43%{width:41%}56%{width:50%}66%{width:52%}71%{width:60%}75%{width:76%}94%{width:86%}to{width:100%}}.progress-bar{border-radius:60px;overflow:hidden;width:100%}.progress-bar span{display:block}.bar{background:govuk-colour(\"blue\")}.progress{animation:loader 8s ease infinite;background:#1d70b8;color:#fff;padding:5px;width:0}\n"] }]
}], propDecorators: { slId: [{
type: Input
}], isLoading: [{
type: Input
}] } });
class GovUKBackLinkComponent {
constructor() {
this.onClick = ($event) => {
if (this.onBack) {
$event.preventDefault();
this.onBack($event);
}
};
}
}
GovUKBackLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKBackLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKBackLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKBackLinkComponent, selector: "govuk-backLink", inputs: { id: "id", href: "href", onBack: "onBack" }, ngImport: i0, template: `<a [id]="id" href="{{href}}" class="govuk-back-link" (click)="onClick($event)"> <ng-content></ng-content> </a>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKBackLinkComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'govuk-backLink',
template: `<a [id]="id" href="{{href}}" class="govuk-back-link" (click)="onClick($event)"> <ng-content></ng-content> </a>`
}]
}], propDecorators: { id: [{
type: Input
}], href: [{
type: Input
}], onBack: [{
type: Input
}] } });
class GovUKAccordionSectionComponent {
constructor() {
this.active = false;
this.expandClassName = 'govuk-accordion__section--expanded';
this.expand = () => this.active = !this.active;
this.open = () => this.active = true;
this.close = () => this.active = false;
}
}
GovUKAccordionSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKAccordionSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKAccordionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKAccordionSectionComponent, selector: "govuk-accordion-section", inputs: { id: "id", heading: "heading", summary: "summary", active: "active" }, ngImport: i0, template: `
<div class="govuk-accordion__section" [ngClass]="{'govuk-accordion__section--expanded': active}" id="section-{{id}}">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading" id="section-header-{{id}}">
<button (click)="expand()" id="section-open-btn-{{id}}"
type="button" id="accordion-default-heading-2"
aria-controls="accordion-default-content-2"
class="govuk-accordion__section-button" aria-expanded="false">
{{heading}}
<span class="govuk-accordion__icon" aria-hidden="true"></span>
</button>
</h2>
<div *ngIf="summary" class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
{{summary}}
</div>
</div>
<div id="accordion-content-{{id}}"
class="govuk-accordion__section-content"
aria-labelledby="accordion-default-heading-2">
<ng-content></ng-content>
</div>
</div>
`, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKAccordionSectionComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'govuk-accordion-section',
template: `
<div class="govuk-accordion__section" [ngClass]="{'govuk-accordion__section--expanded': active}" id="section-{{id}}">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading" id="section-header-{{id}}">
<button (click)="expand()" id="section-open-btn-{{id}}"
type="button" id="accordion-default-heading-2"
aria-controls="accordion-default-content-2"
class="govuk-accordion__section-button" aria-expanded="false">
{{heading}}
<span class="govuk-accordion__icon" aria-hidden="true"></span>
</button>
</h2>
<div *ngIf="summary" class="govuk-accordion__section-summary govuk-body" id="accordion-with-summary-sections-summary-1">
{{summary}}
</div>
</div>
<div id="accordion-content-{{id}}"
class="govuk-accordion__section-content"
aria-labelledby="accordion-default-heading-2">
<ng-content></ng-content>
</div>
</div>
`
}]
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
type: Input
}], heading: [{
type: Input
}], summary: [{
type: Input
}], active: [{
type: Input
}] } });
class GovUKButtonComponent {
constructor() {
/** Event emitted when the button is clicked, the id of the button is the event */
this.buttonClick = new EventEmitter();
this.buttonFocus = new EventEmitter();
this.buttonBlur = new EventEmitter();
this.name = '';
/** Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. */
this.type = 'button';
/** When true the button is place in a loading state, where a spinner is shown with the loading text */
this.isLoading = false;
/** Text to show when in loading state, default is 'Loading' */
this.loadingText = 'Loading';
/** Prevent the click from executing if we are loading */
this.onClick = (event) => {
if (this.disabled || this.isLoading) {
return;
}
this.buttonClick.emit({ originEvent: event, id: this.id });
if (this.click) {
this.click();
}
};
}
}
GovUKButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKButtonComponent, selector: "govuk-button", inputs: { click: "click", id: "id", name: "name", classes: "classes", type: "type", isLoading: "isLoading", loadingText: "loadingText", disabled: "disabled" }, outputs: { buttonClick: "buttonClick", buttonFocus: "buttonFocus", buttonBlur: "buttonBlur" }, ngImport: i0, template: `
<button id="btn-{{id}}"
[attr.name]="name||id"
[attr.type]="type"
class="govuk-button {{classes}}"
[ngClass]="{ 'govuk-button--disabled' : disabled }"
data-module="govuk-button"
(click)="onClick($event)"
(focus)="buttonFocus.emit($event)"
(blur)="buttonBlur.emit($event)">
<span *ngIf="!isLoading">
<ng-content></ng-content>
</span>
<span *ngIf="isLoading">
<i class="fa fa-spinner fa-spin"></i>
<span> {{loadingText}} </span>
</span>
</button>`, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKButtonComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-button',
template: `
<button id="btn-{{id}}"
[attr.name]="name||id"
[attr.type]="type"
class="govuk-button {{classes}}"
[ngClass]="{ 'govuk-button--disabled' : disabled }"
data-module="govuk-button"
(click)="onClick($event)"
(focus)="buttonFocus.emit($event)"
(blur)="buttonBlur.emit($event)">
<span *ngIf="!isLoading">
<ng-content></ng-content>
</span>
<span *ngIf="isLoading">
<i class="fa fa-spinner fa-spin"></i>
<span> {{loadingText}} </span>
</span>
</button>`,
}]
}], propDecorators: { buttonClick: [{
type: Output
}], buttonFocus: [{
type: Output
}], buttonBlur: [{
type: Output
}], click: [{
type: Input
}], id: [{
type: Input
}], name: [{
type: Input
}], classes: [{
type: Input
}], type: [{
type: Input
}], isLoading: [{
type: Input
}], loadingText: [{
type: Input
}], disabled: [{
type: Input
}] } });
class GovUKAccordionComponent {
constructor() {
this.sectionButtonText = 'Open All';
this.allOpen = false;
}
toggleAll() {
if (this.allOpen) {
this.tabs.toArray().forEach(tab => tab.close());
this.allOpen = false;
this.sectionButtonText = 'Open All';
}
else {
this.tabs.toArray().forEach(tab => tab.open());
this.allOpen = true;
this.sectionButtonText = 'Close All';
}
}
}
GovUKAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKAccordionComponent, selector: "govuk-accordion", inputs: { id: "id" }, queries: [{ propertyName: "tabs", predicate: GovUKAccordionSectionComponent }], ngImport: i0, template: `
<div class="govuk-accordion" data-module="govuk-accordion" [id]="id">
<div class="govuk-accordion__controls">
<button type="button" (click)="toggleAll()" id="toggle-all-btn-{{id}}"
class="govuk-accordion__open-all"
aria-expanded="false">
{{sectionButtonText}}
<span class="govuk-visually-hidden">sections</span>
</button>
</div>
<ng-content></ng-content>
</div>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKAccordionComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'govuk-accordion',
template: `
<div class="govuk-accordion" data-module="govuk-accordion" [id]="id">
<div class="govuk-accordion__controls">
<button type="button" (click)="toggleAll()" id="toggle-all-btn-{{id}}"
class="govuk-accordion__open-all"
aria-expanded="false">
{{sectionButtonText}}
<span class="govuk-visually-hidden">sections</span>
</button>
</div>
<ng-content></ng-content>
</div>
`
}]
}], propDecorators: { id: [{
type: Input
}], tabs: [{
type: ContentChildren,
args: [GovUKAccordionSectionComponent]
}] } });
class GovUKDetailsComponent {
constructor() {
/**
* An event emitted when details is clicked, with the current status
*/
this.clicked = new EventEmitter();
/**
* An event emitted when details is opened.
*/
this.opened = new EventEmitter();
/**
* An event emitted when details is closed
*/
this.closed = new EventEmitter();
this.status = 'closed';
}
raiseEvents() {
if (this.status === 'closed') {
this.status = 'opened';
this.opened.emit();
}
else {
this.status = 'closed';
this.closed.emit();
}
this.clicked.emit({ status: this.status });
}
}
GovUKDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKDetailsComponent, selector: "govuk-details", inputs: { id: "id", name: "name", classes: "classes", summaryText: "summaryText" }, outputs: { clicked: "clicked", opened: "opened", closed: "closed" }, ngImport: i0, template: `<details id ="{{id}}" class="govuk-details {{classes}}" data-module="govuk-details">
<summary class="govuk-details__summary" (click)="raiseEvents()">
<span class="govuk-details__summary-text" id ="details-summary-{{id}}">
{{summaryText}}
</span>
</summary>
<div class="govuk-details__text" id ="details-text-{{id}}">
<ng-content></ng-content>
</div>
</details>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKDetailsComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-details',
template: `<details id ="{{id}}" class="govuk-details {{classes}}" data-module="govuk-details">
<summary class="govuk-details__summary" (click)="raiseEvents()">
<span class="govuk-details__summary-text" id ="details-summary-{{id}}">
{{summaryText}}
</span>
</summary>
<div class="govuk-details__text" id ="details-text-{{id}}">
<ng-content></ng-content>
</div>
</details>`
}]
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
type: Input
}], name: [{
type: Input
}], classes: [{
type: Input
}], summaryText: [{
type: Input
}], clicked: [{
type: Output
}], opened: [{
type: Output
}], closed: [{
type: Output
}] } });
/**
* 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>
* ```
*/
class GovUKTextAreaComponent {
constructor() {
this.rows = '5';
this.label = emptyLabel();
this.hint = emptyHint();
this.errorMessage = emptyErrorMessage();
this.modelChange = new EventEmitter();
this.maxlength = 50;
}
}
GovUKTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKTextAreaComponent, selector: "govuk-textarea", inputs: { id: "id", name: "name", classes: "classes", type: "type", rows: "rows", describeBy: "describeBy", label: "label", hint: "hint", errorMessage: "errorMessage", model: "model", maxlength: "maxlength" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: `
<govuk-field [id]="id" [label]="label" [hint]="hint" [errorMessage]="errorMessage">
<textarea [id]="id"
[attr.name]="name || id"
[attr.rows]="rows"
class="govuk-textarea {{classes}}"
[ngClass]="{'govuk-textarea--error' : errorMessage.text}"
[attr.aria-describedby]="describeBy"
[attr.maxlength]="maxlength"
[attr.type]="type"
[(ngModel)]="model"
(ngModelChange)="modelChange.emit($event)" >
</textarea>
<govuk-field>
`, isInline: true, components: [{ type: GovUKFieldComponent, selector: "govuk-field", inputs: ["id", "name", "classes", "hint", "errorMessage", "label"] }], directives: [{ 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]" }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.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: GovUKTextAreaComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-textarea',
template: `
<govuk-field [id]="id" [label]="label" [hint]="hint" [errorMessage]="errorMessage">
<textarea [id]="id"
[attr.name]="name || id"
[attr.rows]="rows"
class="govuk-textarea {{classes}}"
[ngClass]="{'govuk-textarea--error' : errorMessage.text}"
[attr.aria-describedby]="describeBy"
[attr.maxlength]="maxlength"
[attr.type]="type"
[(ngModel)]="model"
(ngModelChange)="modelChange.emit($event)" >
</textarea>
<govuk-field>
`
}]
}], propDecorators: { id: [{
type: Input
}], name: [{
type: Input
}], classes: [{
type: Input
}], type: [{
type: Input
}], rows: [{
type: Input
}], describeBy: [{
type: Input
}], label: [{
type: Input
}], hint: [{
type: Input
}], errorMessage: [{
type: Input
}], model: [{
type: Input
}], modelChange: [{
type: Output
}], maxlength: [{
type: Input
}] } });
/**
* 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>
* ```
*/
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: GovUKFieldComponent, selector: "govuk-field", inputs: ["id", "name", "classes", "hint", "errorMessage", "label"] }, { type: GovUKLinkActionComponent, selector: "govuk-link-action", inputs: ["id", "linkAction"] }], directives: [{ 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]" }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.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
}] } });
class GovUKDataCaptureComponent {
constructor() {
/** { text: string; classes: string; } */
this.hint = emptyHint();
/** { text: string; classes: string; } */
this.errorMessage = emptyErrorMessage();
this.modelChange = new EventEmitter();
}
}
GovUKDataCaptureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKDataCaptureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKDataCaptureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKDataCaptureComponent, selector: "ng-component", inputs: { id: "id", name: "name", classes: "classes", describeBy: "describeBy", hint: "hint", errorMessage: "errorMessage", model: "model" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: '', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKDataCaptureComponent, decorators: [{
type: Component,
args: [{ template: '' }]
}], 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
}] } });
class GovUKInputItemComponent extends GovUKDataCaptureComponent {
constructor() {
super(...arguments);
this.label = emptyLabel();
this.maxlength = 5;
}
}
GovUKInputItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKInputItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
GovUKInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKInputItemComponent, selector: "govuk-input-item", inputs: { label: "label", maxlength: "maxlength" }, usesInheritance: true, ngImport: i0, template: `
<div class="govuk-input-inline__item">
<govuk-field [id]="id" [label]="label" [hint]="hint">
<input [id]="id"
[attr.name]="id"
class="govuk-input {{classes}}"
[ngClass]="{'govuk-input--error' : errorMessage.text}"
[attr.maxlength]="maxlength"
[attr.type]="'text'"
[(ngModel)]="model"
(ngModelChange)="modelChange.emit($event)" >
</govuk-field>
</div>
`, isInline: true, styles: [".govuk-input-inline__item{display:inline-block;margin-right:20px;margin-bottom:0}\n"], components: [{ type: GovUKFieldComponent, selector: "govuk-field", inputs: ["id", "name", "classes", "hint", "errorMessage", "label"] }], directives: [{ 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]" }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.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: GovUKInputItemComponent, decorators: [{
type: Component,
args: [{ selector: 'govuk-input-item', template: `
<div class="govuk-input-inline__item">
<govuk-field [id]="id" [label]="label" [hint]="hint">
<input [id]="id"
[attr.name]="id"
class="govuk-input {{classes}}"
[ngClass]="{'govuk-input--error' : errorMessage.text}"
[attr.maxlength]="maxlength"
[attr.type]="'text'"
[(ngModel)]="model"
(ngModelChange)="modelChange.emit($event)" >
</govuk-field>
</div>
`, styles: [".govuk-input-inline__item{display:inline-block;margin-right:20px;margin-bottom:0}\n"] }]
}], propDecorators: { label: [{
type: Input
}], maxlength: [{
type: Input
}] } });
class GovUKTagComponent {
}
GovUKTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKTagComponent, selector: "govuk-tag", inputs: { id: "id", className: "className" }, ngImport: i0, template: `<strong class="govuk-tag {{className}}">
<ng-content></ng-content>
</strong>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKTagComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'govuk-tag',
template: `<strong class="govuk-tag {{className}}">
<ng-content></ng-content>
</strong>`
}]
}], propDecorators: { id: [{
type: Input
}], className: [{
type: Input
}] } });
class GovUKWarningComponent {
constructor() {
this.background = '#FFF3DC';
}
}
GovUKWarningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKWarningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKWarningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKWarningComponent, selector: "govuk-warning", inputs: { message: "message", background: "background" }, ngImport: i0, template: "<div id=\"warning-message-block\" class=\"govuk-warning-text warning-message\" [style.background-color]=\"background\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n {{message}}\n </strong>\n\n <div id=\"user-warning-message-advice\" class=\"govuk-body warning-message-advice\">\n <ng-content></ng-content>\n </div>\n\n </div>\n", styles: [".warning-message{padding:20px}.govuk-warning-text__icon{left:20px}.govuk-warning-text{margin-bottom:20px!important;padding-bottom:20px!important}.warning-message-advice{padding-left:45px}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKWarningComponent, decorators: [{
type: Component,
args: [{ selector: 'govuk-warning', template: "<div id=\"warning-message-block\" class=\"govuk-warning-text warning-message\" [style.background-color]=\"background\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n {{message}}\n </strong>\n\n <div id=\"user-warning-message-advice\" class=\"govuk-body warning-message-advice\">\n <ng-content></ng-content>\n </div>\n\n </div>\n", styles: [".warning-message{padding:20px}.govuk-warning-text__icon{left:20px}.govuk-warning-text{margin-bottom:20px!important;padding-bottom:20px!important}.warning-message-advice{padding-left:45px}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { message: [{
type: Input
}], background: [{
type: Input
}] } });
const createValidationSummary = () => ({
hasError: false,
errors: []
});
class GovUKErrorSummaryComponent {
constructor(el) {
this.el = el;
}
set errorSummary(value) {
this.errorSummaryValue = value;
if (value.hasError) {
setTimeout(() => this.el.nativeElement.querySelector("#errorSummary").focus(), 0);
}
}
get errorSummary() {
return this.errorSummaryValue;
}
setFocus(id, $event) {
$event.preventDefault();
if (typeof this.focus !== 'function') {
return;
}
if (!id) {
console.warn(`govuk-error-summary : Could not set focus on id, does it exist on the component?`);
return;
}
try {
this.focus(id);
}
catch (error) {
console.warn(`govuk-error-summary : Could not set focus on id: ${id}, does it exist on the component?` + error);
}
}
ngOnInit() {
if (!this.errorSummary) {
this.errorSummary = { hasError: false, errors: [] };
console.warn('govuk-error-summary : Missing errorSummary input, you need to supply the errorSummary');
}
if (typeof this.focus !== 'function') {
console.warn('govuk-error-summary : If you want to set the focus on the input with an error, then you need to supply a function');
}
}
}
GovUKErrorSummaryComponent.ɵfac = i0.ɵɵ