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

Angular components port of govuk-frontend nunjucks macros.

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { emptyLabel } from '../label/label';
import { emptyErrorMessage } from '../error/error-message.model';
import { emptyHint } from '../hint/hint';
import * as i0 from "@angular/core";
import * as i1 from "../field/field.component";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
/**
 * Select component based on the nunjucks template version
 * https://design-system.service.gov.uk/components/select/
 *
 * ```javascript
 *   <govuk-select
 *       [id]="'sort'"
 *       [name]="'sort'"
 *       [hint]='{text: "You should pick a value from the list"}'
 *       [label]='{text: "Sort by"}'
 *       [items]="selectItems"
 *       [(model)]="model.eventType" >
 *   </govuk-select>
 *
 *  selectItems = [
 *   {value: "published", text: "Recently published" },
 *   {value: "updated", text: "Recently updated" },
 *   {value: "views", text: "Most views" },
 *   {value: "comments", text: "Most comments" }
 * ];
 *
 * ```
 */
export class GovUKSelectComponent {
    constructor() {
        this.label = emptyLabel();
        this.hint = emptyHint();
        this.errorMessage = emptyErrorMessage();
        /** Selected value from the items.value */
        this.modelChange = new EventEmitter();
        this.onChange = (value) => this.modelChange.emit(value);
    }
}
GovUKSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKSelectComponent, selector: "govuk-select", inputs: { id: "id", name: "name", items: "items", describeBy: "describeBy", label: "label", hint: "hint", errorMessage: "errorMessage", classes: "classes", model: "model" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: `
    <govuk-field [id]="id" [label]="label" [hint]="hint" [errorMessage]="errorMessage" >

      <select
        [id]="id"
        [attr.name]="name || id"
        class="govuk-select {{ classes }}"
        [ngClass]="{ 'govuk-select--error': errorMessage.text }"
        [attr.aria-describedby]="describeBy"
        [ngModel]="model"
        (change)="onChange($event.target.value)" >

        <option *ngFor="let item of items" [value]="item.value" [disabled]="item.disabled" >
          {{ item.text }} {{ item.disabled }}
        </option>

      </select>
    </govuk-field>
  `, isInline: true, components: [{ type: i1.GovUKFieldComponent, selector: "govuk-field", inputs: ["id", "name", "classes", "hint", "errorMessage", "label"] }], directives: [{ type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKSelectComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'govuk-select',
                    template: `
    <govuk-field [id]="id" [label]="label" [hint]="hint" [errorMessage]="errorMessage" >

      <select
        [id]="id"
        [attr.name]="name || id"
        class="govuk-select {{ classes }}"
        [ngClass]="{ 'govuk-select--error': errorMessage.text }"
        [attr.aria-describedby]="describeBy"
        [ngModel]="model"
        (change)="onChange($event.target.value)" >

        <option *ngFor="let item of items" [value]="item.value" [disabled]="item.disabled" >
          {{ item.text }} {{ item.disabled }}
        </option>

      </select>
    </govuk-field>
  `,
                }]
        }], propDecorators: { id: [{
                type: Input
            }], name: [{
                type: Input
            }], items: [{
                type: Input
            }], describeBy: [{
                type: Input
            }], label: [{
                type: Input
            }], hint: [{
                type: Input
            }], errorMessage: [{
                type: Input
            }], classes: [{
                type: Input
            }], model: [{
                type: Input
            }], modelChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2dvdnVrLWFuZ3VsYXIvc3JjL2xpYi9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxVQUFVLEVBQVMsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRCxPQUFPLEVBQUUsaUJBQWlCLEVBQWdCLE1BQU0sOEJBQThCLENBQUM7QUFDL0UsT0FBTyxFQUFFLFNBQVMsRUFBUSxNQUFNLGNBQWMsQ0FBQzs7Ozs7QUFJL0M7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQkc7QUF1QkgsTUFBTSxPQUFRLG9CQUFvQjtJQXRCbEM7UUF3Q1csVUFBSyxHQUFVLFVBQVUsRUFBRSxDQUFDO1FBQzVCLFNBQUksR0FBUyxTQUFTLEVBQUUsQ0FBQztRQUN6QixpQkFBWSxHQUFpQixpQkFBaUIsRUFBRSxDQUFDO1FBTTFELDBDQUEwQztRQUNoQyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFFbkQsYUFBUSxHQUFHLENBQUMsS0FBYSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztLQUM1RDs7aUhBOUJhLG9CQUFvQjtxR0FBcEIsb0JBQW9CLDJRQXBCdEI7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCVDsyRkFFVyxvQkFBb0I7a0JBdEJqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO29CQUN4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCVDtpQkFDRjs4QkFFVSxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQWFHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBR0csS0FBSztzQkFBYixLQUFLO2dCQUdJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgZW1wdHlMYWJlbCwgTGFiZWwgfSBmcm9tICcuLi9sYWJlbC9sYWJlbCc7XG5pbXBvcnQgeyBHb3ZVS0RhdGFDYXB0dXJlIH0gZnJvbSAnLi4vZGF0YS1jYXB0dXJlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBlbXB0eUVycm9yTWVzc2FnZSwgRXJyb3JNZXNzYWdlIH0gZnJvbSAnLi4vZXJyb3IvZXJyb3ItbWVzc2FnZS5tb2RlbCc7XG5pbXBvcnQgeyBlbXB0eUhpbnQsIEhpbnQgfSBmcm9tICcuLi9oaW50L2hpbnQnO1xuaW1wb3J0IHsgU2VsZWN0SXRlbXMgfSBmcm9tICcuL3NlbGVjdC1pdGVtJztcblxuXG4vKipcbiAqIFNlbGVjdCBjb21wb25lbnQgYmFzZWQgb24gdGhlIG51bmp1Y2tzIHRlbXBsYXRlIHZlcnNpb25cbiAqIGh0dHBzOi8vZGVzaWduLXN5c3RlbS5zZXJ2aWNlLmdvdi51ay9jb21wb25lbnRzL3NlbGVjdC9cbiAqXG4gKiBgYGBqYXZhc2NyaXB0XG4gKiAgIDxnb3Z1ay1zZWxlY3RcbiAqICAgICAgIFtpZF09XCInc29ydCdcIlxuICogICAgICAgW25hbWVdPVwiJ3NvcnQnXCJcbiAqICAgICAgIFtoaW50XT0ne3RleHQ6IFwiWW91IHNob3VsZCBwaWNrIGEgdmFsdWUgZnJvbSB0aGUgbGlzdFwifSdcbiAqICAgICAgIFtsYWJlbF09J3t0ZXh0OiBcIlNvcnQgYnlcIn0nXG4gKiAgICAgICBbaXRlbXNdPVwic2VsZWN0SXRlbXNcIlxuICogICAgICAgWyhtb2RlbCldPVwibW9kZWwuZXZlbnRUeXBlXCIgPlxuICogICA8L2dvdnVrLXNlbGVjdD5cbiAqXG4gKiAgc2VsZWN0SXRlbXMgPSBbXG4gKiAgIHt2YWx1ZTogXCJwdWJsaXNoZWRcIiwgdGV4dDogXCJSZWNlbnRseSBwdWJsaXNoZWRcIiB9LFxuICogICB7dmFsdWU6IFwidXBkYXRlZFwiLCB0ZXh0OiBcIlJlY2VudGx5IHVwZGF0ZWRcIiB9LFxuICogICB7dmFsdWU6IFwidmlld3NcIiwgdGV4dDogXCJNb3N0IHZpZXdzXCIgfSxcbiAqICAge3ZhbHVlOiBcImNvbW1lbnRzXCIsIHRleHQ6IFwiTW9zdCBjb21tZW50c1wiIH1cbiAqIF07XG4gKlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dvdnVrLXNlbGVjdCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGdvdnVrLWZpZWxkIFtpZF09XCJpZFwiIFtsYWJlbF09XCJsYWJlbFwiIFtoaW50XT1cImhpbnRcIiBbZXJyb3JNZXNzYWdlXT1cImVycm9yTWVzc2FnZVwiID5cblxuICAgICAgPHNlbGVjdFxuICAgICAgICBbaWRdPVwiaWRcIlxuICAgICAgICBbYXR0ci5uYW1lXT1cIm5hbWUgfHwgaWRcIlxuICAgICAgICBjbGFzcz1cImdvdnVrLXNlbGVjdCB7eyBjbGFzc2VzIH19XCJcbiAgICAgICAgW25nQ2xhc3NdPVwieyAnZ292dWstc2VsZWN0LS1lcnJvcic6IGVycm9yTWVzc2FnZS50ZXh0IH1cIlxuICAgICAgICBbYXR0ci5hcmlhLWRlc2NyaWJlZGJ5XT1cImRlc2NyaWJlQnlcIlxuICAgICAgICBbbmdNb2RlbF09XCJtb2RlbFwiXG4gICAgICAgIChjaGFuZ2UpPVwib25DaGFuZ2UoJGV2ZW50LnRhcmdldC52YWx1ZSlcIiA+XG5cbiAgICAgICAgPG9wdGlvbiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtc1wiIFt2YWx1ZV09XCJpdGVtLnZhbHVlXCIgW2Rpc2FibGVkXT1cIml0ZW0uZGlzYWJsZWRcIiA+XG4gICAgICAgICAge3sgaXRlbS50ZXh0IH19IHt7IGl0ZW0uZGlzYWJsZWQgfX1cbiAgICAgICAgPC9vcHRpb24+XG5cbiAgICAgIDwvc2VsZWN0PlxuICAgIDwvZ292dWstZmllbGQ+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzICBHb3ZVS1NlbGVjdENvbXBvbmVudCBpbXBsZW1lbnRzIEdvdlVLRGF0YUNhcHR1cmU8c3RyaW5nPiB7XG4gIEBJbnB1dCgpIGlkOiBzdHJpbmc7XG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZztcblxuICAvKiogUmVxdWlyZWQuIEFycmF5IG9mIHt2YWx1ZTogc3RyaW5nOyB0ZXh0OiBzdHJpbmc7IGRpc2FibGVkOiBib29sZWFufVxuICAgKlxuICAgKiBgYGBqYXZhc2NyaXB0XG4gICAqICBzZWxlY3RJdGVtcyA9IFtcbiAgICogICB7dmFsdWU6IFwicHVibGlzaGVkXCIsIHRleHQ6IFwiUmVjZW50bHkgcHVibGlzaGVkXCIgfSxcbiAgICogICB7dmFsdWU6IFwidXBkYXRlZFwiLCB0ZXh0OiBcIlJlY2VudGx5IHVwZGF0ZWRcIiB9LFxuICAgKiAgIHt2YWx1ZTogXCJ2aWV3c1wiLCB0ZXh0OiBcIk1vc3Qgdmlld3NcIiB9LFxuICAgKiAgIHt2YWx1ZTogXCJjb21tZW50c1wiLCB0ZXh0OiBcIk1vc3QgY29tbWVudHNcIiB9XG4gICAqIF07XG4gICAqIGBgYFxuICAgKi9cbiAgQElucHV0KCkgaXRlbXM6IFNlbGVjdEl0ZW1zW107XG4gIEBJbnB1dCgpIGRlc2NyaWJlQnk/OiBzdHJpbmc7XG5cbiAgQElucHV0KCkgbGFiZWw6IExhYmVsID0gZW1wdHlMYWJlbCgpO1xuICBASW5wdXQoKSBoaW50OiBIaW50ID0gZW1wdHlIaW50KCk7XG4gIEBJbnB1dCgpIGVycm9yTWVzc2FnZTogRXJyb3JNZXNzYWdlID0gZW1wdHlFcnJvck1lc3NhZ2UoKTtcbiAgQElucHV0KCkgY2xhc3Nlczogc3RyaW5nO1xuXG4gIC8qKiBTZWxlY3RlZCB2YWx1ZSBmcm9tIHRoZSBpdGVtcy52YWx1ZSAqL1xuICBASW5wdXQoKSBtb2RlbDogc3RyaW5nO1xuXG4gIC8qKiBTZWxlY3RlZCB2YWx1ZSBmcm9tIHRoZSBpdGVtcy52YWx1ZSAqL1xuICBAT3V0cHV0KCkgbW9kZWxDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBvbkNoYW5nZSA9ICh2YWx1ZTogc3RyaW5nKSA9PiB0aGlzLm1vZGVsQ2hhbmdlLmVtaXQodmFsdWUpO1xufVxuIl19