govuk-angular/fesm2020/govuk-angular.mjs.map

Angular components port of govuk-frontend nunjucks macros.

{"version":3,"file":"govuk-angular.mjs","sources":["../../../projects/govuk-angular/src/lib/input/link-action.component.ts","../../../projects/govuk-angular/src/lib/hint/hint.component.ts","../../../projects/govuk-angular/src/lib/error/error.component.ts","../../../projects/govuk-angular/src/lib/error/error-message.model.ts","../../../projects/govuk-angular/src/lib/hint/hint.ts","../../../projects/govuk-angular/src/lib/fieldset/fieldset.ts","../../../projects/govuk-angular/src/lib/govuk-error-line.directive.ts","../../../projects/govuk-angular/src/lib/fieldset/fieldset.component.ts","../../../projects/govuk-angular/src/lib/label/label.ts","../../../projects/govuk-angular/src/lib/label/label.component.ts","../../../projects/govuk-angular/src/lib/field/field.component.ts","../../../projects/govuk-angular/src/lib/loading/loading-bar.component.ts","../../../projects/govuk-angular/src/lib/loading/loading-bar.component.html","../../../projects/govuk-angular/src/lib/back-link/back-link.component.ts","../../../projects/govuk-angular/src/lib/accordion/accordion-section.component.ts","../../../projects/govuk-angular/src/lib/button/button.component.ts","../../../projects/govuk-angular/src/lib/accordion/accordion.component.ts","../../../projects/govuk-angular/src/lib/details/details.component.ts","../../../projects/govuk-angular/src/lib/textarea/textarea.component.ts","../../../projects/govuk-angular/src/lib/input/input.component.ts","../../../projects/govuk-angular/src/lib/data-capture.component.ts","../../../projects/govuk-angular/src/lib/input-item/input-item.ts","../../../projects/govuk-angular/src/lib/tag/tag.component.ts","../../../projects/govuk-angular/src/lib/warning/warning.component.ts","../../../projects/govuk-angular/src/lib/warning/warning.component.html","../../../projects/govuk-angular/src/lib/error-summary/error-summary.component.ts","../../../projects/govuk-angular/src/lib/error-summary/error-summary.component.html","../../../projects/govuk-angular/src/lib/tabs/tab.component.ts","../../../projects/govuk-angular/src/lib/tabs/tabs.component.ts","../../../projects/govuk-angular/src/lib/panel/panel.component.ts","../../../projects/govuk-angular/src/lib/navbar/nav.component.ts","../../../projects/govuk-angular/src/lib/navbar/navbar.component.ts","../../../projects/govuk-angular/src/lib/error-message/error-message.component.ts","../../../projects/govuk-angular/src/lib/error-message/error-message.component.html","../../../projects/govuk-angular/src/lib/checkboxes/checkboxes.component.ts","../../../projects/govuk-angular/src/lib/radios/radio.component.ts","../../../projects/govuk-angular/src/lib/radios/_radio-group.component.ts","../../../projects/govuk-angular/src/lib/radios/_radio-inline.component.ts","../../../projects/govuk-angular/src/lib/radios/radios.component.ts","../../../projects/govuk-angular/src/lib/select-list-2/filtered-select.component.ts","../../../projects/govuk-angular/src/lib/select-list-2/filtered-select.component.html","../../../projects/govuk-angular/src/lib/header/header.component.ts","../../../projects/govuk-angular/src/lib/header/header.component.html","../../../projects/govuk-angular/src/lib/select/select.component.ts","../../../projects/govuk-angular/src/lib/phase-banner/phase-banner.component.ts","../../../projects/govuk-angular/src/lib/date-input/date-input.component.ts","../../../projects/govuk-angular/src/lib/govuk-angular.module.ts","../../../projects/govuk-angular/src/public-api.ts","../../../projects/govuk-angular/src/govuk-angular.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { LinkAction } from './link-action';\n\n@Component({\n  selector: 'govuk-link-action',\n  template: `\n<span style=\"margin-top: 5px; display: block;\" *ngIf=\"linkAction.text\">\n      <a id=\"{{id}}\" href=\"#\" class=\"govuk-link\" (click)=\"linkAction.action($event)\">\n            {{linkAction.text}}\n      </a>\n</span>\n`\n})\nexport class GovUKLinkActionComponent implements OnInit {\n  @Input() id: string;\n  @Input() linkAction: LinkAction;\n\n  ngOnInit(): void {\n      this.id = this.linkAction.id ? this.linkAction.id : `link-action-${this.id}`;\n  }\n\n}\n","import { Component, Input, OnInit } from '@angular/core';\nimport { Hint } from './hint';\n\n@Component({\n  selector: 'govuk-hint',\n  template: `\n<span id=\"hint-{{id}}\" class=\"govuk-hint {{hint.classes}}\"> {{hint.text}} </span>\n`\n})\nexport class GovUKHintComponent implements OnInit {\n  @Input() id: string;\n  @Input() hint: Hint = { text: '', classes : ''};\n\n  ngOnInit(): void {\n    if (typeof this.hint === 'string') {\n      const text = this.hint;\n\n      this.hint = {\n        text,\n        classes: ''\n      };\n    }\n\n\n  }\n\n}\n","import { Component, Input } from '@angular/core';\nimport { ErrorMessage } from './error-message.model';\n\n\n@Component({\n  selector: 'govuk-error',\n  template: `\n    <span *ngIf=\"errorMessage.text\" id=\"error-{{id}}\" class=\"govuk-error-message {{errorMessage.classes}}\">\n      <span class=\"govuk-visually-hidden\">Error:</span>\n      {{errorMessage.text}}\n    </span>\n  `\n})\nexport class GovUKErrorComponent {\n  /** Use to create unique ids for each item in the radio list */\n  @Input() id: string;\n  @Input() errorMessage: ErrorMessage;\n}\n","\nexport class ErrorMessage {\n  text: string;\n  classes?: string;\n}\n\nexport const emptyErrorMessage = (): ErrorMessage => ({text: '', classes: ''});\n","\nexport class Hint {\n  text: string;\n  classes?: string;\n}\n\nexport const emptyHint = (): Hint => ({text: ''});\n","export interface Fieldset {\n  /**\n   * @description\n   *  One or more element IDs to add to the aria-describedby attribute\n   *  used to provide additional descriptive information for screenreader users\n   */\n  describedBy?: string;\n\n  /** Classes to add to the fieldset container */\n  classes: string;\n\n  /** Optional ARIA role attribute */\n  role?: string;\n}\n\nexport const emptyFieldSet = (): Fieldset => ({classes: '', role: ''});\n\nexport interface Legend {\n  text: string;\n  classes: string;\n  isPageHeading: boolean;\n}\n\nexport const emptyLegend = (): Legend => ({text: '', classes: '', isPageHeading: false});\n","\nimport { Directive, Input, ElementRef, OnChanges } from '@angular/core';\nimport { ErrorMessage } from './error/error-message.model';\n\n@Directive({\n  selector: '[govukErrorLine]'\n})\nexport class GovErrorLineDirective implements OnChanges {\n  @Input() govukErrorLine: ErrorMessage;\n\n  constructor(public el: ElementRef) { }\n\n  ngOnChanges(changes: import('@angular/core').SimpleChanges): void {\n    this.el.nativeElement.className = this.toggleError();\n  }\n\n  /**\n   * @description Toggle the error class on the input element\n   */\n  toggleError() {\n    const errorClass = ' govuk-form-group--error';\n    const target = this.el.nativeElement.className;\n\n    return this.govukErrorLine.text ? target.includes(errorClass) ? target : target.concat(errorClass) :\n                                      target.replace(errorClass, '');\n  }\n\n}\n","import { Component,  Input } from '@angular/core';\nimport { emptyErrorMessage, ErrorMessage } from '../error/error-message.model';\nimport { emptyHint, Hint } from '../hint/hint';\nimport { emptyFieldSet, emptyLegend, Fieldset, Legend } from './fieldset';\n\n@Component({\n  selector: 'govuk-fieldset',\n  template: `\n<div [govukErrorLine]=\"errorMessage\" class=\"govuk-form-group\">\n    <fieldset class=\"govuk-fieldset\" [attr.aria-describedby]=\"fieldset.describedBy\">\n\n      <legend class=\"govuk-fieldset__legend {{legend.classes}}\" id=\"fieldset-{{id}}\">\n        <h1 *ngIf=\"legend.isPageHeading\" class=\"govuk-fieldset__heading\"> {{legend.text}} </h1>\n        <h2  *ngIf=\"!legend.isPageHeading\"  class=\"govuk-fieldset__heading\"> {{legend.text}} </h2>\n      </legend>\n\n      <govuk-hint  [id]=\"id\" [hint]=\"hint\"></govuk-hint>\n      <govuk-error [id]=\"id\" [errorMessage]=\"errorMessage\" ></govuk-error>\n\n      <ng-content></ng-content>\n\n    </fieldset>\n</div>\n`\n})\nexport class GovUKFieldsetComponent{\n  @Input() id: string;\n  @Input() fieldset: Fieldset = emptyFieldSet();\n  @Input() legend: Legend = emptyLegend();\n  @Input() hint: Hint = emptyHint();\n  @Input() errorMessage: ErrorMessage = emptyErrorMessage();\n}\n","\nexport class Label {\n  text: string;\n  for?: string;\n  isPageHeading?: boolean;\n  classes?: string;\n}\n\nexport const emptyLabel = (): Label => ({text: ''});\n","import { Component, Input } from '@angular/core';\nimport { Label } from './label';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'govuk-label',\n  template: `\n  <h1 class=\"govuk-label-wrapper\" *ngIf=\"label.isPageHeading\">\n    <label class=\"govuk-label {{label.classes}}\" id=\"lbl-{{id}}\" [for]=\"id || label.for\">{{label.text}}</label>\n  </h1>\n\n  <label *ngIf=\"!label.isPageHeading\"  class=\"govuk-label {{label.classes}}\" id=\"lbl-{{id}}\" for=\"{{id}}\">{{label.text}}</label>\n  `\n})\nexport class GovUKLabelComponent  {\n  /** A unique id will be prefixed with lbl, also the id for the input */\n  @Input() id: string;\n  @Input() label: Label = {text: ''};\n}\n","import { Component, Input } from '@angular/core';\nimport { GovUKComponent } from '../data-capture.component';\nimport { emptyErrorMessage, ErrorMessage } from '../error/error-message.model';\nimport { emptyHint, Hint } from '../hint/hint';\nimport { emptyLabel, Label } from '../label/label';\n\n\n/**\n * The Field template is a common template for field type inputs.\n * The template includes the Hint Label and ErrorMessage common to a number\n * of component, including, govuk-input, govuk-select and govuk-input-group\n */\n@Component({\n  selector: 'govuk-field',\n  template: `\n<div [govukErrorLine]=\"errorMessage\" class=\"govuk-form-group classes\">\n  <govuk-label [id]=\"id\" [label]=\"label\"></govuk-label>\n  <govuk-hint  [id]=\"id\" [hint]=\"hint\" *ngIf=\"hasHint()\"> </govuk-hint>\n  <govuk-error [id]=\"id\" [errorMessage]=\"errorMessage\"></govuk-error>\n\n  <ng-content></ng-content>\n\n</div>\n`\n})\nexport class GovUKFieldComponent implements GovUKComponent {\n  @Input() id: string;\n  @Input() name: string;\n  @Input() classes: string;\n\n  @Input() hint: Hint = emptyHint();\n  @Input() errorMessage: ErrorMessage = emptyErrorMessage();\n  @Input() label: Label = emptyLabel();\n\n  hasHint = () => this.hint.text !== \"\";\n}\n","import { Component,  Input } from '@angular/core';\n\n@Component({\n  selector: 'govuk-loading',\n  templateUrl: './loading-bar.component.html',\n  styleUrls: ['./loading-bar.component.scss']\n})\nexport class GovUKLoadingBarComponent{\n  /** Use to create unique ids for each item in the radio list */\n  @Input() slId: string;\n\n  /** Title to display at the top of the radio list */\n  @Input() isLoading: boolean;\n\n}\n","<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>","import { Component,  Input } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'govuk-backLink',\n  template: `<a [id]=\"id\" href=\"{{href}}\"  class=\"govuk-back-link\" (click)=\"onClick($event)\"> <ng-content></ng-content> </a>`\n})\nexport class GovUKBackLinkComponent{\n  @Input() id: string;\n  @Input() href: string;\n\n  /** @deprecated Use (click) */\n  @Input() onBack: ($event) => void;\n\n  onClick = ($event: Event) => {\n    if (this.onBack) {\n      $event.preventDefault();\n      this.onBack($event);\n    }\n  };\n\n}\n","\nimport { Component, Input } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'govuk-accordion-section',\n  template: `\n    <div class=\"govuk-accordion__section\" [ngClass]=\"{'govuk-accordion__section--expanded': active}\" id=\"section-{{id}}\">\n\n      <div class=\"govuk-accordion__section-header\">\n\n        <h2 class=\"govuk-accordion__section-heading\"  id=\"section-header-{{id}}\">\n\n          <button (click)=\"expand()\" id=\"section-open-btn-{{id}}\"\n                  type=\"button\" id=\"accordion-default-heading-2\"\n                  aria-controls=\"accordion-default-content-2\"\n                  class=\"govuk-accordion__section-button\" aria-expanded=\"false\">\n            {{heading}}\n            <span class=\"govuk-accordion__icon\" aria-hidden=\"true\"></span>\n\n          </button>\n        </h2>\n       <div  *ngIf=\"summary\" class=\"govuk-accordion__section-summary govuk-body\" id=\"accordion-with-summary-sections-summary-1\">\n         {{summary}}\n       </div>\n      </div>\n\n      <div id=\"accordion-content-{{id}}\"\n           class=\"govuk-accordion__section-content\"\n           aria-labelledby=\"accordion-default-heading-2\">\n           <ng-content></ng-content>\n      </div>\n\n    </div>\n  `\n})\nexport class GovUKAccordionSectionComponent  {\n  @Input() id: string;\n  @Input() heading: string;\n  @Input() summary: string;\n  @Input() active = false;\n\n  expandClassName = 'govuk-accordion__section--expanded';\n\n  constructor() {}\n\n  expand = () =>  this.active = !this.active;\n  open = () => this.active = true;\n  close = () => this.active = false;\n\n}\n\n","import { Component, EventEmitter, Input, Output, } from '@angular/core';\nimport { ButtonClickEvent } from './button-events';\n\n@Component({\n  selector: 'govuk-button',\n  template: `\n<button id=\"btn-{{id}}\"\n        [attr.name]=\"name||id\"\n        [attr.type]=\"type\"\n        class=\"govuk-button {{classes}}\"\n        [ngClass]=\"{ 'govuk-button--disabled' : disabled }\"\n        data-module=\"govuk-button\"\n        (click)=\"onClick($event)\"\n        (focus)=\"buttonFocus.emit($event)\"\n        (blur)=\"buttonBlur.emit($event)\">\n\n  <span *ngIf=\"!isLoading\">\n    <ng-content></ng-content>\n  </span>\n\n  <span *ngIf=\"isLoading\">\n    <i class=\"fa fa-spinner fa-spin\"></i>\n    <span> {{loadingText}} </span>\n  </span>\n\n</button>`,\n})\nexport class GovUKButtonComponent {\n  /** Event emitted when the button is clicked, the id of the button is the event */\n  @Output() buttonClick = new EventEmitter<ButtonClickEvent>();\n  @Output() buttonFocus: EventEmitter<any> = new EventEmitter();\n  @Output() buttonBlur: EventEmitter<any> = new EventEmitter();\n\n  /** @deprecated Do not use, swap over to buttonClick */\n  @Input() click: () => void;\n\n  @Input() id: string;\n  @Input() name = '';\n  @Input() classes: string;\n\n  /** Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. */\n  @Input() type = 'button';\n\n  /** When true the button is place in a loading state, where a spinner is shown with the loading text */\n  @Input() isLoading = false;\n\n  /** Text to show when in loading state, default is 'Loading' */\n  @Input() loadingText = 'Loading';\n\n  /**  Whether the button should be disabled. For button and input elements, disabled */\n  @Input() disabled: boolean;\n\n  /** Prevent the click from executing if we are loading */\n  onClick = (event) => {\n    if (this.disabled || this.isLoading) {return;}\n\n    this.buttonClick.emit({originEvent: event, id: this.id});\n\n    if (this.click) {this.click();}\n  };\n}\n","\nimport { Component, ContentChildren, QueryList, Input } from '@angular/core';\n\nimport { GovUKAccordionSectionComponent } from './accordion-section.component';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'govuk-accordion',\n  template: `\n\n  <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" [id]=\"id\">\n\n    <div class=\"govuk-accordion__controls\">\n\n      <button type=\"button\" (click)=\"toggleAll()\" id=\"toggle-all-btn-{{id}}\"\n         class=\"govuk-accordion__open-all\"\n         aria-expanded=\"false\">\n         {{sectionButtonText}}\n         <span class=\"govuk-visually-hidden\">sections</span>\n      </button>\n\n    </div>\n\n    <ng-content></ng-content>\n\n\n</div>\n\n`\n})\nexport class GovUKAccordionComponent  {\n    @Input() id: string;\n    @ContentChildren(GovUKAccordionSectionComponent) tabs: QueryList<GovUKAccordionSectionComponent>;\n    sectionButtonText = 'Open All';\n    allOpen =  false;\n\n    toggleAll() {\n\n    if (this.allOpen) {\n      this.tabs.toArray().forEach(tab => tab.close());\n      this.allOpen = false;\n      this.sectionButtonText = 'Open All';\n    } else {\n      this.tabs.toArray().forEach(tab => tab.open());\n      this.allOpen = true;\n      this.sectionButtonText = 'Close All';\n    }\n\n    }\n\n}\n","import { Component,  EventEmitter,  Input, Output } from '@angular/core';\n\n@Component({\n  selector: 'govuk-details',\n  template: `<details id =\"{{id}}\" class=\"govuk-details {{classes}}\" data-module=\"govuk-details\">\n    <summary class=\"govuk-details__summary\" (click)=\"raiseEvents()\">\n    <span class=\"govuk-details__summary-text\" id =\"details-summary-{{id}}\">\n      {{summaryText}}\n    </span>\n    </summary>\n    <div class=\"govuk-details__text\" id =\"details-text-{{id}}\">\n      <ng-content></ng-content>\n    </div>\n  </details>`\n})\nexport class GovUKDetailsComponent {\n  @Input() id: string;\n  @Input() name: string;\n  @Input() classes: string;\n\n\n  @Input() summaryText: string;\n\n  /**\n   * An event emitted when details is clicked, with the current status\n   */\n  @Output() clicked = new EventEmitter<any>();\n\n  /**\n   * An event emitted when details is opened.\n   */\n  @Output() opened = new EventEmitter();\n\n  /**\n   * An event emitted when details is closed\n   */\n  @Output() closed = new EventEmitter();\n\n  // track open and close status\n  status: string;\n\n  constructor() {\n    this.status = 'closed';\n  }\n\n  raiseEvents() {\n    if (this.status === 'closed') {\n      this.status = 'opened';\n      this.opened.emit();\n    } else {\n      this.status = 'closed';\n      this.closed.emit();\n    }\n\n    this.clicked.emit({status: this.status});\n  }\n\n}\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { emptyLabel, Label } from '../label/label';\nimport { GovUKDataCapture } from '../data-capture.component';\nimport { emptyHint, Hint } from '../hint/hint';\nimport { emptyErrorMessage, ErrorMessage } from '../error/error-message.model';\n/**\n * Input component with error handling.\n *\n * ```javascript\n *    <govuk-input [id]=\"'with-date-fill'\"\n *                 [(model)]=\"model.date\"\n *                 [label]=\"{text:'What is the date today?', classes: 'govuk-label--m'}\"\n *                 [linkAction]=\"{ text:'Use todays date', action: today } \"\n *                 [hint]=\"{ text: 'Try the link below '}\"\n *                 [classes]=\"'govuk-input--width-10'\"\n *                 maxlength=\"10\"></govuk-input>\n * ```\n */\n@Component({\n  selector: 'govuk-textarea',\n  template: `\n<govuk-field [id]=\"id\" [label]=\"label\" [hint]=\"hint\" [errorMessage]=\"errorMessage\">\n\n  <textarea [id]=\"id\"\n          [attr.name]=\"name || id\"\n          [attr.rows]=\"rows\"\n          class=\"govuk-textarea {{classes}}\"\n          [ngClass]=\"{'govuk-textarea--error' : errorMessage.text}\"\n          [attr.aria-describedby]=\"describeBy\"\n          [attr.maxlength]=\"maxlength\"\n          [attr.type]=\"type\"\n          [(ngModel)]=\"model\"\n          (ngModelChange)=\"modelChange.emit($event)\" >\n</textarea>\n\n<govuk-field>\n`\n})\nexport class GovUKTextAreaComponent implements GovUKDataCapture<string> {\n  @Input() id: string;\n  @Input() name: string;\n  @Input() classes: string;\n\n  /** Type of input control to render. Defaults to 'text' */\n  @Input() type: 'text';\n\n  @Input() rows = '5';\n\n  @Input() describeBy?: string;\n\n  @Input() label: Label = emptyLabel();\n\n  @Input() hint: Hint = emptyHint();\n  @Input() errorMessage: ErrorMessage = emptyErrorMessage();\n\n  @Input() model: string;\n  @Output() modelChange = new EventEmitter<string>();\n\n  @Input() maxlength = 50;\n}\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { emptyLabel, Label } from '../label/label';\nimport { GovUKDataCapture } from '../data-capture.component';\nimport { LinkAction } from './link-action';\nimport { emptyHint, Hint } from '../hint/hint';\nimport { emptyErrorMessage, ErrorMessage } from '../error/error-message.model';\n/**\n * Input component with error handling.\n *\n * ```javascript\n *    <govuk-input [id]=\"'with-date-fill'\"\n *                 [(model)]=\"model.date\"\n *                 [label]=\"{text:'What is the date today?', classes: 'govuk-label--m'}\"\n *                 [linkAction]=\"{ text:'Use todays date', action: today } \"\n *                 [hint]=\"{ text: 'Try the link below '}\"\n *                 [classes]=\"'govuk-input--width-10'\"\n *                 maxlength=\"10\"></govuk-input>\n * ```\n */\n@Component({\n  selector: 'govuk-input',\n  template: `\n<govuk-field [id]=\"id\" [label]=\"label\" [hint]=\"hint\" [errorMessage]=\"errorMessage\">\n\n  <input  [id]=\"id\"\n          [attr.name]=\"name || id\"\n          class=\"govuk-input {{classes}}\"\n          [ngClass]=\"{'govuk-input--error' : errorMessage.text}\"\n          [attr.aria-describedby]=\"describeBy\"\n          [attr.maxlength]=\"maxlength\"\n          [attr.type]=\"type\"\n          [(ngModel)]=\"model\"\n          (ngModelChange)=\"modelChange.emit($event)\" \n          (focus)=\"onInputFocus.emit($event)\"\n          (blur)=\"onInputBlur.emit($event)\"\n          (submit)=\"onInputSubmit.emit($event)\"\n          (scroll)=\"onInputScroll.emit($event)\">\n\n  <govuk-link-action [id]=\"id\"  [linkAction]=\"linkAction\"></govuk-link-action>\n\n<govuk-field>\n`\n})\nexport class GovUKInputComponent implements GovUKDataCapture<string> {\n  @Input() id: string;\n  @Input() name: string;\n  @Input() classes: string;\n\n  /** Type of input control to render. Defaults to 'text' */\n  @Input() type: 'text';\n\n  @Input() describeBy?: string;\n\n  @Input() label: Label = emptyLabel();\n\n  @Input() hint: Hint = emptyHint();\n  @Input() errorMessage: ErrorMessage = emptyErrorMessage();\n\n  // Not yet implemented\n  // @Input() prefix: string;\n  // @Input() suffix: string;\n  // @Input() formGroup: string;\n\n  @Input() model: string;\n  @Output() modelChange = new EventEmitter<string>();\n  @Output() onInputBlur = new EventEmitter<Event>();\n  @Output() onInputFocus = new EventEmitter<Event>();\n  @Output() onInputSubmit = new EventEmitter<Event>();\n  @Output() onInputScroll = new EventEmitter<Event>();\n\n  @Input() maxlength = 50;\n\n  /** Can be use to set the input value on clicking the link  */\n  @Input() linkAction: LinkAction = { text: '', action: null };\n\n\n}\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { emptyErrorMessage, ErrorMessage } from './error/error-message.model';\nimport { Fieldset, Legend } from './fieldset/fieldset';\nimport { emptyHint, Hint } from './hint/hint';\nimport { Label } from './label/label';\n\n@Component({ template: '' })\nexport class GovUKDataCaptureComponent<T> {\n\n  /** id: Required: id for each select box */\n  @Input() id: string;\n\n  /** name: Optional will default to id */\n  @Input() name: string;\n\n  /** classes to add to the root component. */\n  @Input() classes: string;\n\n  /**\n   * One or more element IDs to add to the input aria-describedby attribute **without a fieldset**,\n   * used to provide additional descriptive information for screenreader users\n   */\n  @Input() describeBy?: string;\n\n  /** { text: string; classes: string; } */\n  @Input() hint: Hint = emptyHint();\n\n  /** { text: string; classes: string; } */\n  @Input() errorMessage: ErrorMessage = emptyErrorMessage();\n\n  /** Use to bind the model to the component input */\n  @Input() model: T;\n  @Output() modelChange = new EventEmitter<T>();\n}\n\nexport interface GovUKComponent {\n  /** id: Required: unique id */\n  id: string;\n\n  /** name: Optional will default to id if empty*/\n  name: string;\n\n  /** classes to add to the root component. */\n  classes: string;\n}\n\n\nexport interface GovUKDataCapture<T> extends GovUKComponent {\n\n  /**\n   * One or more element IDs to add to the input aria-describedby attribute **without a fieldset**,\n   * used to provide additional descriptive information for screenreader users\n   */\n  describeBy?: string;\n\n  /**\n   * Options for the hint component: @example { text: string; classes: string; }\n   * ```javascript\n   *   [hint]=\"{ text: 'Try the link below '}\"\n   * ```\n  */\n  hint: Hint;\n\n  /** { text: string; classes: string; } */\n  errorMessage: ErrorMessage;\n\n  /** Use to bind the model to the component */\n  model: T;\n  modelChange: EventEmitter<T>;\n\n  /** Label text @example {text: string; classes: string; isPageHeading: boolean;}  */\n  label?: Label;\n\n  /**\n   * {describedBy?: string, classes: string; role?: string;}\n   */\n  fieldset?: Fieldset;\n\n  /**\n   * {text: string; classes: string; isPageHeading: boolean;}\n   * ```javascript\n   *   [legend]=\"{ text: 'Have you changed your name?',\n   *               classes: 'govuk-fieldset__legend--l',\n   *               isPageHeading: false}\"\n   * ```\n   */\n  legend?: Legend;\n}\n","import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { emptyLabel, Label } from '../label/label';\nimport { GovUKDataCaptureComponent } from '../data-capture.component';\n\n@Component({\n  selector: 'govuk-input-item',\n  styleUrls: ['./input-item.scss'],\n  template: `\n<div class=\"govuk-input-inline__item\">\n\n  <govuk-field [id]=\"id\" [label]=\"label\" [hint]=\"hint\">\n        <input [id]=\"id\"\n                [attr.name]=\"id\"\n                class=\"govuk-input {{classes}}\"\n                [ngClass]=\"{'govuk-input--error' : errorMessage.text}\"\n                [attr.maxlength]=\"maxlength\"\n                [attr.type]=\"'text'\"\n                [(ngModel)]=\"model\"\n                (ngModelChange)=\"modelChange.emit($event)\" >\n  </govuk-field>\n\n</div>\n`\n})\nexport class GovUKInputItemComponent extends GovUKDataCaptureComponent<string> {\n  @Input() label: Label = emptyLabel();\n  @Input() maxlength = 5;\n}\n","import { Component,  Input } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'govuk-tag',\n  template: `<strong class=\"govuk-tag {{className}}\">\n    <ng-content></ng-content>\n  </strong>`\n})\nexport class GovUKTagComponent{\n\n  /** Use to create unique ids for each item in the radio list */\n  @Input() id: string;\n  @Input() className: string;\n\n\n}\n","import {Component, Input} from '@angular/core';\n\n@Component({\n    selector: 'govuk-warning',\n    templateUrl: './warning.component.html',\n    styleUrls: ['./warning.component.scss']\n})\nexport class GovUKWarningComponent {\n   @Input() message: string;\n   @Input() background = '#FFF3DC';\n\n   constructor() { }\n}\n","<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","import { Component,  ElementRef, Input, OnInit, Renderer2 } from '@angular/core';\n\n\nexport const createValidationSummary = (): ValidationSummary => ({\n  hasError: false,\n  errors: []\n});\n\nexport interface ValidationSummary {\n  hasError: boolean;\n  errors: Array<ValidationError>;\n}\n\nexport interface ValidationError {\n  /** id of input with error */\n  id?: string;\n  hasError: boolean;\n  fullError: string;\n}\n\n@Component({\n  selector: 'govuk-error-summary',\n  templateUrl: './error-summary.component.html'\n})\nexport class GovUKErrorSummaryComponent implements OnInit {\n  /** ErrorSummary details */\n\n  private errorSummaryValue: ValidationSummary;\n  @Input()\n  public set errorSummary(value: ValidationSummary) {\n    this.errorSummaryValue = value;\n    if (value.hasError) {\n      setTimeout(() => this.el.nativeElement.querySelector(\"#errorSummary\").focus(), 0);\n    }\n  }\n\n  public get errorSummary() {\n    return this.errorSummaryValue;\n  }\n\n  /** A function which will set the focus on the input corresponding to the clicked error message */\n  @Input() focus: (id: string) => void;\n\n  constructor(public el: ElementRef) {\n  }\n\n  setFocus(id, $event: Event) {\n    $event.preventDefault();\n\n    if (typeof this.focus !== 'function') {\n      return;\n    }\n\n    if (!id) {\n      console.warn(`govuk-error-summary : Could not set focus on id, does it exist on the component?`);\n      return;\n    }\n\n    try {\n      this.focus(id);\n    } catch (error) {\n      console.warn(`govuk-error-summary : Could not set focus on id: ${id}, does it exist on the component?` + error);\n    }\n  }\n\n  ngOnInit(): void {\n    if (!this.errorSummary) {\n      this.errorSummary = { hasError: false, errors: [] };\n      console.warn('govuk-error-summary : Missing errorSummary input, you need to supply the errorSummary');\n    }\n\n    if (typeof this.focus !== 'function') {\n      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');\n    }\n\n  }\n\n}\n","<div *ngIf=\"errorSummary.hasError\" id=\"errorSummary\" \n     class=\"govuk-error-summary\" \n     aria-labelledby=\"error-summary-title\" \n     role=\"alert\" tabindex=\"-1\" \n     data-module=\"govuk-error-summary\" >\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\" *ngFor=\"let err of errorSummary.errors\">\n      <li *ngIf=\"err.hasError\">\n        <a *ngIf=\"err.id\"  (click)=\"setFocus(err.id, $event)\" href=\"#{{err.id}}\" id=\"{{err.id}}ErrorLink\">{{err.fullError}}</a>\n        <span *ngIf=\"!err.id\" class=\"govuk-error-message\">\n          <span class=\"govuk-visually-hidden\">Error:</span> {{err.fullError}}\n        </span>\n      </li>\n    </ul>\n  </div>\n</div>\n","import { Component, Input } from '@angular/core';\n\n\n@Component({\n    selector: 'govuk-tab',\n    template: `\n<div [hidden]=\"!active\" class=\"pane\">\n  <div class=\"govuk-tabs__panel\">\n    <ng-content></ng-content>\n  </div>\n</div>\n`\n})\nexport class GovUKTabComponent  {\n    @Input() id: string;\n\n    // Tab label\n    @Input() label: string;\n\n    // Set as the active tab\n    @Input() active = false;\n\n    // Hide the tab\n    @Input() hide = false;\n\n}\n\n","import {\n    Component,\n    ContentChildren,\n    QueryList,\n    AfterContentInit,\n    Input,\n    Output,\n    EventEmitter,\n    SimpleChanges,\n    OnChanges,\n} from '@angular/core';\nimport { GovUKTabComponent } from './tab.component';\nimport { TabEvent } from './tab-events';\n\n@Component({\n    selector: 'govuk-tabs',\n    template: `\n    <ul class=\"govuk-tabs__list\" id=\"tab-list-{{ id }}\">\n      <li\n        *ngFor=\"let tab of showTabs\"\n        class=\"govuk-tabs__list-item\"\n        (click)=\"onClick($event, tab)\"\n        [ngClass]=\"{ 'govuk-tabs__list-item--selected': tab.active }\"\n        id=\"tab-list-item-{{ tab.id }}\" >\n\n        <a class=\"govuk-tabs__tab\" href=\"javascript://\" id=\"tab-link-{{ tab.id }}\" > {{ tab.label }} </a>\n      </li>\n    </ul>\n\n    <ng-content></ng-content>\n  `,\n})\nexport class GovUKTabsComponent implements AfterContentInit, OnChanges {\n\n    @Input() id: string;\n\n    @Input() activeTab: string;\n    @Output() activeTabChange = new EventEmitter();\n\n    @Output() tabClick = new EventEmitter<TabEvent>();\n\n    @Output() tabChange = new EventEmitter<TabEvent>();\n\n    @ContentChildren(GovUKTabComponent) tabs: QueryList<GovUKTabComponent>;\n\n    showTabs: QueryList<GovUKTabComponent>;\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.tabActiveChange(changes);\n    }\n\n    // contentChildren are set\n    ngAfterContentInit() {\n        this.showTabs = this.tabs.filter((tab) => !tab.hide) as any;\n\n        const activeTabs = this.tabs.filter((tab) => tab.active);\n\n        // if there is no active tab set, activate the first\n        if (activeTabs.length === 0) {\n            this.tabs.first.active = true;\n        }\n\n        if (this.activeTab !== '') {this.activeTabChange.emit(this.tabs.first.id);}\n    }\n\n    tabActiveChange(changes: SimpleChanges) {\n        if (!this.tabs) {return;}\n        const activeTabId = changes.activeTab.currentValue;\n\n        this.tabs.toArray().forEach((tab) => {\n            tab.active =  (tab.id === activeTabId);\n        });\n\n    }\n\n    onClick(event: Event, tabCurrent: GovUKTabComponent) {\n        this.tabs.toArray().forEach((tab) => (tab.active = false));\n\n        const tabClickEvent: TabEvent = { originEvent: event, id: tabCurrent.id, name: tabCurrent.label };\n\n        this.tabClick.emit(tabClickEvent);\n\n        if (tabCurrent.id !== this.activeTab) {\n            this.tabChange.emit(tabClickEvent);\n        }\n\n        tabCurrent.active = true;\n\n        this.activeTabChange.emit(tabCurrent.id);\n    }\n}\n","import { Component,  Input } from '@angular/core';\n\n@Component({\n  selector: 'govuk-panel',\n  template: `<div id=\"{{id}}\" class=\"govuk-panel govuk-panel--confirmation\">\n    <h1 class=\"govuk-panel__title\" id =\"panel-title-{{id}}\">\n      {{titleText}}\n    </h1>\n    <div class=\"govuk-panel__body\" id =\"panel-body-{{id}}\">\n      <ng-content></ng-content>\n    </div>\n  </div>`\n})\nexport class GovUKPanelComponent{\n  @Input() id: string;\n  /** Use to create unique ids for each item in the radio list */\n  @Input() titleText: string;\n}\n","import { Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'govuk-nav',\n    styleUrls: ['./navigation.scss'],\n    template: ` `\n})\nexport class GovUKNavComponent  {\n    @Input() id: string;\n    @Input() label: string;\n    @Input() link: any;\n    @Input() active: boolean;\n\n}\n\n","\nimport { Component, ContentChildren, QueryList, Input, ElementRef } from '@angular/core';\nimport { Router } from '@angular/router';\n\nimport { GovUKNavComponent } from './nav.component';\n\n@Component({\n    selector: 'govuk-navbar',\n    styleUrls: ['./navigation.scss'],\n    template: `\n  <nav class=\"app-subnav\">\n    <ul class=\"app-subnav__section\">\n        <li *ngFor=\"let nav of navs\"  class=\"app-subnav__section-item \"  [ngClass]=\"{'app-subnav__section-item--current': nav.active}\" >\n              <a class=\"app-subnav__link  govuk-link govuk-link--no-visited-state\"\n                 [id]=\"createId(nav.label)\"\n                 href=\"#\"\n                 (click)=\"onClick($event, nav, createId(nav.label))\"\n                 routerLinkActive=\"active\"> {{nav.label}}  </a>\n        </li>\n\n    </ul>\n  </nav>\n`\n})\nexport class GovUKNavBarComponent  {\n    @Input() id: string;\n\n    @ContentChildren(GovUKNavComponent) navs: QueryList<GovUKNavComponent>;\n\n    constructor(public router: Router, public el: ElementRef) {}\n\n    onClick($event: Event, nav: GovUKNavComponent, id: string) {\n        $event.preventDefault();\n        this.selectNav(nav);\n        this.router.navigate([nav.link]);\n        this.setFocus(id);\n    }\n\n    createId(choice: string): string {\n        return choice.toLowerCase().replace(/\\s/gm, '-') + '-' + this.id;\n    }\n\n    setFocus(id: string) {\n        this.el.nativeElement.querySelector('#' + id).blur();\n    }\n\n\n    selectNav(navCurrent: GovUKNavComponent) {\n        this.navs.toArray().forEach(nav => (nav.active = false));\n        navCurrent.active = true;\n    }\n\n}\n","\nimport {Component, Input} from '@angular/core';\n\n@Component({\n    selector: 'govuk-error-message',\n    templateUrl: './error-message.component.html',\n})\nexport class GovUKErrorMessageComponent {\n   @Input() showError: boolean;\n   @Input() message: string;\n   @Input() advice: string;\n\n   constructor() { }\n}\n","\n<div *ngIf=\"showError\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\" style=\"color: #d4351c;\">\n    {{message}}\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n      <p class=\"govuk-body\" style=\"color: #d4351c;\">\n        {{advice}}\n      </p>\n  </div>\n</div>","import { Component, ElementRef, EventEmitter, Input, Output} from '@angular/core';\nimport { CheckOptionItem } from './check-option-Item';\nimport { emptyFieldSet, emptyLegend, Fieldset, Legend } from '../fieldset/fieldset';\nimport { GovUKDataCapture } from '../data-capture.component';\nimport { emptyHint, Hint } from '../hint/hint';\nimport { emptyErrorMessage, ErrorMessage } from '../error/error-message.model';\nimport { each } from 'lodash';\n\n/**\n * Checkbox component based on the nunjucks template version\n * https://design-system.service.gov.uk/components/checkboxes/\n *\n * ```javascript\n * <govuk-checkboxes\n *   [id]=\"'waste'\"\n *   [fieldset]=\"{ text: 'Which types of waste do you transport?', classes : 'govuk-fieldset__legend--l'}\"\n *   [hint]=\"{text: 'Select all that apply'}\"\n *   [model]=\"model.wasteOptions\" >\n * </govuk-checkboxes>\n *\n * checkOptions: CheckOptionItem[] = [\n *   { text: \"Waste from animal carcasses\", value: \"animal\", checked: false},\n *   { text: \"Waste from mines or quarries\", value: \"quarries\", checked: false},\n *   { text: \"Farm or agricultural waste\", value: \"farm\", checked: false },\n * ];\n *\n * ```\n */\n@Component({\n  selector: 'govuk-checkboxes',\n  template: `\n<govuk-fieldset [id]=\"id\" [fieldset]=\"fieldset\" [legend]=\"legend\" [hint]=\"hint\" [errorMessage]=\"errorMessage\">\n\n  <div class=\"govuk-checkboxes {{classes}}\">\n    <div class=\"govuk-checkboxes__item\" *ngFor=\"let choice of model; let i = index\">\n      <input class=\"govuk-checkboxes__input\"\n              [id]=\"id + '-' + i\"\n              [name]=\"id + '-' + i\"\n              [value]=\"choice.value\"\n              [(ngModel)]=\"choice.checked\"\n              (ngModelChange)=\"onModelChange(id, i, choice)\"\n              type=\"checkbox\"\n              [attr.aria-describedby]=\"describeBy\">\n\n      <label class=\"govuk-label govuk-checkboxes__label\"\n             [for]=\"id + '-' + i\"\n             [attr.data-qa]=\"id + '-' + choice.value.toLowerCase() + '-' + i\"> {{choice.text}}\n      </label>\n\n      <govuk-hint id=\"{{id}}-{{choice.value}}\" [hint]=\"{text : choice.hint, classes: 'govuk-checkboxes__hint'}\"></govuk-hint>\n    </div>\n  </div>\n\n</govuk-fieldset>\n`\n})\nexport class GovUKCheckBoxesComponent implements GovUKDataCapture<CheckOptionItem []> {\n  @Input() id: string;\n  @Input() name: string;\n  @Input() classes: string;\n  @Input() describeBy?: string;\n  @Input() radioMode = false;\n\n  @Input() hint: Hint = emptyHint();\n\n  /** { text: string; classes: string; } */\n  @Input() errorMessage: ErrorMessage = emptyErrorMessage();\n\n  /**\n   * ```javascript\n   *\n   * interface CheckOptionItem {\n   *  text: string;\n   *  value: any;\n   *  checked?: boolean;\n   *  hint?: string | Hint;\n   *  textDivider?: string;\n   * }\n   *\n   * wasteOptions: CheckOptionItem[] = [\n   *   { text: \"Waste from animal carcasses\", value: \"animal\", checked: false},\n   *   { text: \"Waste from mines or quarries\", value: \"quarries\", checked: false},\n   *   { text: \"Farm or agricultural waste\", value: \"farm\", checked: false },\n   * ];\n   * ```\n   */\n  @Input() model: CheckOptionItem[];\n\n  @Output() modelChange = new EventEmitter<any>();\n\n  @Input() fieldset: Fieldset = emptyFieldSet();\n  @Input() legend: Legend = emptyLegend();\n\n  constructor(public el: ElementRef) { }\n\n  /**\n   * Experimental mode :\n   * Radio mode will change the way that the checkboxes work.\n   * They will act more like a radio group where only one option\n   * can be selected from the list, with the extra option to check none\n   */\n  onModelChange(id: any, index: any, choice: CheckOptionItem){\n    // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n    choice.onChange ? choice.onChange(choice.checked) : null;\n\n    if (!this.radioMode) {\n      return;\n    }\n\n    const selected = '#' + id + '-' + index;\n\n    each(this.model, (x,i) => {\n      x.checked = false;\n      const boxId = '#' + id + '-' + i;\n      if (boxId !== selected) {\n        this.el.nativeElement.querySelector(boxId).checked = false;\n      } else {\n        this.el.nativeElement.querySelector(boxId).checked = this.el.nativeElement.querySelector(boxId).checked;\n        x.checked = this.el.nativeElement.querySelector(boxId).checked;\n      }\n    });\n\n    this.modelChange.emit(this.model);\n  }\n}\n\n","import { Component,  Input} from '@angular/core';\n\n@Component({\n  selector: 'govuk-radio',\n  template: `\n  <div id=\"group-{{id}}\" class=\"govuk-radios__item\" tabindex=\"-1\" style=\"margin-bottom: 10px;\">\n\n    <input id=\"{{id}}\"\n          [name]=\"name\"\n          [value]=\"value\"\n          type=\"radio\"\n          [(ngModel)]=\"model.selected\"\n          class=\"govuk-radios__input\"\n          tabindex=\"0\">\n\n    <label id=\"lbl-{{id}}-{{value}}\" class=\"govuk-label govuk-radios__label\" [for]=\"id\">{{label}}</label>\n\n    <govuk-hint id=\"radio-item-{{id}}\" [hint]=\"{ text : hint, classes: 'govuk-radios__hint'}\"  ></govuk-hint>\n\n  </div>\n  `\n})\nexport class GovUKRadioComponent{\n  /** Used to create the id for the group id-group, the radio button id, and label for id  */\n  @Input() id: string;\n\n  @Input() groupName: string;\n\n  /** The value of this radio button */\n  @Input() value: string;\n\n  @Input() name: string;\n\n  /** Radio button label */\n  @Input() label: string;\n\n  @Input() hint: string;\n\n  /** Use for selected item and to show errors */\n  @Input() model: any;\n}\n","import { Component,  Input } from '@angular/core';\nimport { emptyFieldSet, Fieldset } from '../fieldset/fieldset';\nimport { GovUKDataCaptureComponent } from '../data-capture.component';\nimport { RadioOptionItem } from './radio-options-item';\n\n/**\n * @deprecated : Use the govuk-radios component\n */\n@Component({\n  selector: 'govuk-radio-group',\n  template: `\n<govuk-fieldset [id]=\"id\" [legend]=\"fieldset\" [hint]=\"hint\" [errorMessage]=\"errorMessage\" >\n\n  <div class=\"govuk-radios {{classes}}\">\n\n    <span *ngFor=\"let choice of options\">\n\n      <div class=\"govuk-radios__divider\" *ngIf=\"choice.textDivider\">\n        {{choice.textDivider}}\n      </div>\n\n      <govuk-radio    [id]=\"createId(choice.value)\"\n                      [name]=\"id\"\n                      [model]=\"model\"\n                      [value]=\"choice.value\"\n                      [label]=\"choice.text\" [hint]=\"choice.hint\"></govuk-radio>\n    </span>\n\n  </div>\n\n</govuk-fieldset>\n`\n})\nexport class GovUKRadioGroupComponent extends GovUKDataCaptureComponent<string>  {\n\n  @Input() fieldset: Fieldset = emptyFieldSet();\n  @Input() options: Array<RadioOptionItem>;\n\n  createId(choice: string): string {\n    return choice.toLowerCase().replace(/\\s/gm, '-') + '-' + this.id;\n  }\n}\n","import { Component, Input } from '@angular/core';\nimport { emptyFieldSet, Fieldset } from '../fieldset/fieldset';\nimport { GovUKDataCaptureComponent } from '../data-capture.component';\nimport { RadioOptionItem } from './radio-options-item';\n\n/**\n * @deprecated : Use the govuk-radios component\n */\n@Component({\n  selector: 'govuk-radio-inline',\n  template: `\n  <div [govukErrorLine]=\"errorMessage\" class=\"govuk-form-group\" [id]=\"id\" [attr.name]=\"name|| id\">\n\n    <govuk-fieldset [id]=\"id\" [legend]=\"fieldset\" [hint]=\"hint\" [errorMessage]=\"errorMessage\" >\n\n      <div class=\"govuk-radios govuk-radios--inline {{classes}}\">\n\n          <span *ngFor=\"let choice of options\">\n            <govuk-radio [id]=\"createId(choice.value)\"\n                        [name]=\"id\"\n                        [model]=\"model\"\n                        [value]=\"choice.value\"\n                        [label]=\"choice.text\"\n                        [hint]=\"choice.hint\"></govuk-radio>\n          </span>\n\n      </div>\n\n    </govuk-fieldset>\n\n  </div>\n  `\n})\nexport class GovUKRadioInLineComponent extends GovUKDataCaptureComponent<string> {\n\n  @Input() fieldset: Fieldset = emptyFieldSet();\n\n  /** An array of options */\n  @Input() options: Array<RadioOptionItem>;\n\n  createId(choice: string): string {\n    return choice.toLowerCase().replace(/\\s/gm, '-') + '-' + this.id;\n  }\n}\n","import { Component,  EventEmitter,  Input, Output } from '@angular/core';\nimport { emptyFieldSet, emptyLegend, Fieldset, Legend } from '../fieldset/fieldset';\nimport { GovUKDataCapture } from '../data-capture.component';\nimport { RadioOptionItem } from './radio-options-item';\nimport { emptyHint, Hint } from '../hint/hint';\nimport { emptyErrorMessage, ErrorMessage } from '../error/error-message.model';\n\n/**\n * ```javascript\n * <govuk-radios [id]=\"'stacked'\"\n *               [model]=\"location\"\n *               [items]=\"locationOptions\"\n *               [legend]=\"{ text: 'Where do you live?',\n *                           classes: 'govuk-fieldset__legend--l',\n *                           isPageHeading: false}\">\n * </govuk-radios>\n * ```\n */\n@Component({\n  selector: 'govuk-radios',\n  template: `\n<govuk-fieldset [id]=\"id\" [fieldset]=\"fieldset\" [legend]=\"legend\" [hint]=\"hint\" [errorMessage]=\"errorMessage\" >\n\n  <div class=\"govuk-radios {{classes}}\">\n\n    <span *ngFor=\"let choice of items; let i = index;\">\n      <div class=\"govuk-radios__divider\" *ngIf=\"choice.textDivider\"> {{choice.textDivider}} </div>\n\n      <govuk-radio [id]=\"id + '-' + i\"\n                   [name]=\"id + '-' + i\"\n                   [model]=\"model\"\n                   [value]=\"choice.value\"\n                   [label]=\"choice.text\" [hint]=\"choice.hint\"> </govuk-radio>\n    </span>\n  </div>\n\n</govuk-fieldset>\n`\n})\nexport class GovUKRadiosComponent implements GovUKDataCapture<string>  {\n  @Input() id: string;\n  @Input() name: string;\n  /** govuk-radios--inline\n   * govuk-radios--small\n   */\n  @Input() classes: string;\n  @Input() describeBy?: string;\n  @Input() hint: Hint = emptyHint();\n  @Input() errorMessage: ErrorMessage = emptyErrorMessage();\n\n  /**\n   * Selected radio value from items.value, set a default value if required\n   *\n   * ```javascript\n   * { selected: \"\" }\n   * ```\n   */\n  @Input() model: string;\n\n  /** Selected radio value from items.value */\n  @Output() modelChange = new EventEmitter<string>();\n\n  @Input() fieldset: Fieldset = emptyFieldSet();\n  @Input() legend: Legend = emptyLegend();\n\n  /**\n   * ```javascript\n   * items: RadioOptionItem[] = [\n   *   { text: \"Yes\", value: \"yes\" },\n   *   { text: \"No\", value: \"no\" },\n   * ];\n   * ```\n   */\n  @Input() items: Array<RadioOptionItem>;\n}\n","\nimport {\n  Component,\n  OnInit,\n  ViewChild,\n  ElementRef,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectionStrategy,\n  AfterViewInit,\n  ChangeDetectorRef,\n  SimpleChanges,\n  OnChanges,\n} from '@angular/core';\nimport { Observable, of, fromEvent, merge } from 'rxjs';\nimport {\n  filter,\n  map,\n  tap,\n  distinctUntilChanged,\n  debounceTime,\n  delay,\n  withLatestFrom,\n  startWith,\n  mapTo,\n} from 'rxjs/operators';\nimport { ErrorMessage } from '../error/error-message.model';\nimport { Hint } from '../hint/hint';\nimport { Label } from '../label/label';\n\nexport type Option = {\n  text: string;\n  id: string;\n  group?: string;\n  selected?: boolean;\n};\n\ntype GroupedOptions = { groupName: string; options: Option[] };\n\n@Component({\n  selector: 'govuk-filtered-select',\n  templateUrl: './filtered-select.component.html',\n  styleUrls: ['./filtered-select.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FilteredSelectComponent implements AfterViewInit {\n\n  @Input() id: string;\n\n  /** Label = {text: \"\", classes: \"\", isPageHeading: false} */\n  @Input() label: Label = {text: '', classes: '', isPageHeading: false};\n\n  /** Class extention 'govuk-input--width-20 */\n  @Input() classes: string;\n\n  /** Hint text */\n  @Input() hint: Hint = {text: '', classes: ''};\n\n  /** Error message to show */\n  @Input() errorMessage: ErrorMessage = { text: '', classes: ''};\n\n\n\n  // use the angular decorator to get the controls within the template\n  @ViewChild('filterInput')\n  filterInputElementRef: ElementRef;\n  @ViewChild('selectBox') selectBoxElementRef: ElementRef;\n  @ViewChild('fakeInput') fakeInputElementRef: ElementRef;\n\n  // recieve an array of options\n  @Input() options: Option[];\n\n  // boolean to declare whether we grouped or not\n  @Input() grouped = false;\n\n  // styling input variables all with a preset default\n  @Input() lines = 5;\n  // the background colour needs to be har