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

Angular components port of govuk-frontend nunjucks macros.

import { Component, EventEmitter, Input, Output, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export 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
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2dvdnVrLWFuZ3VsYXIvc3JjL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxHQUFHLE1BQU0sZUFBZSxDQUFDOzs7QUEyQnhFLE1BQU0sT0FBTyxvQkFBb0I7SUF4QmpDO1FBeUJFLGtGQUFrRjtRQUN4RSxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFvQixDQUFDO1FBQ25ELGdCQUFXLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDcEQsZUFBVSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBTXBELFNBQUksR0FBRyxFQUFFLENBQUM7UUFHbkIsK0dBQStHO1FBQ3RHLFNBQUksR0FBRyxRQUFRLENBQUM7UUFFekIsdUdBQXVHO1FBQzlGLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFFM0IsK0RBQStEO1FBQ3RELGdCQUFXLEdBQUcsU0FBUyxDQUFDO1FBS2pDLHlEQUF5RDtRQUN6RCxZQUFPLEdBQUcsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNsQixJQUFJLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtnQkFBQyxPQUFPO2FBQUM7WUFFOUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBQyxXQUFXLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFDLENBQUMsQ0FBQztZQUV6RCxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO2FBQUM7UUFDakMsQ0FBQyxDQUFDO0tBQ0g7O2lIQWpDWSxvQkFBb0I7cUdBQXBCLG9CQUFvQixtVEF0QnJCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztVQW9CRjsyRkFFRyxvQkFBb0I7a0JBeEJoQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO29CQUN4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O1VBb0JGO2lCQUNUOzhCQUdXLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTTtnQkFDRyxVQUFVO3NCQUFuQixNQUFNO2dCQUdFLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFHRyxJQUFJO3NCQUFaLEtBQUs7Z0JBR0csU0FBUztzQkFBakIsS0FBSztnQkFHRyxXQUFXO3NCQUFuQixLQUFLO2dCQUdHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJ1dHRvbkNsaWNrRXZlbnQgfSBmcm9tICcuL2J1dHRvbi1ldmVudHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdnb3Z1ay1idXR0b24nLFxuICB0ZW1wbGF0ZTogYFxuPGJ1dHRvbiBpZD1cImJ0bi17e2lkfX1cIlxuICAgICAgICBbYXR0ci5uYW1lXT1cIm5hbWV8fGlkXCJcbiAgICAgICAgW2F0dHIudHlwZV09XCJ0eXBlXCJcbiAgICAgICAgY2xhc3M9XCJnb3Z1ay1idXR0b24ge3tjbGFzc2VzfX1cIlxuICAgICAgICBbbmdDbGFzc109XCJ7ICdnb3Z1ay1idXR0b24tLWRpc2FibGVkJyA6IGRpc2FibGVkIH1cIlxuICAgICAgICBkYXRhLW1vZHVsZT1cImdvdnVrLWJ1dHRvblwiXG4gICAgICAgIChjbGljayk9XCJvbkNsaWNrKCRldmVudClcIlxuICAgICAgICAoZm9jdXMpPVwiYnV0dG9uRm9jdXMuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgKGJsdXIpPVwiYnV0dG9uQmx1ci5lbWl0KCRldmVudClcIj5cblxuICA8c3BhbiAqbmdJZj1cIiFpc0xvYWRpbmdcIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvc3Bhbj5cblxuICA8c3BhbiAqbmdJZj1cImlzTG9hZGluZ1wiPlxuICAgIDxpIGNsYXNzPVwiZmEgZmEtc3Bpbm5lciBmYS1zcGluXCI+PC9pPlxuICAgIDxzcGFuPiB7e2xvYWRpbmdUZXh0fX0gPC9zcGFuPlxuICA8L3NwYW4+XG5cbjwvYnV0dG9uPmAsXG59KVxuZXhwb3J0IGNsYXNzIEdvdlVLQnV0dG9uQ29tcG9uZW50IHtcbiAgLyoqIEV2ZW50IGVtaXR0ZWQgd2hlbiB0aGUgYnV0dG9uIGlzIGNsaWNrZWQsIHRoZSBpZCBvZiB0aGUgYnV0dG9uIGlzIHRoZSBldmVudCAqL1xuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPEJ1dHRvbkNsaWNrRXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBidXR0b25Gb2N1czogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBidXR0b25CbHVyOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAvKiogQGRlcHJlY2F0ZWQgRG8gbm90IHVzZSwgc3dhcCBvdmVyIHRvIGJ1dHRvbkNsaWNrICovXG4gIEBJbnB1dCgpIGNsaWNrOiAoKSA9PiB2b2lkO1xuXG4gIEBJbnB1dCgpIGlkOiBzdHJpbmc7XG4gIEBJbnB1dCgpIG5hbWUgPSAnJztcbiAgQElucHV0KCkgY2xhc3Nlczogc3RyaW5nO1xuXG4gIC8qKiBUeXBlIG9mIGlucHV0IG9yIGJ1dHRvbiDigJMgYnV0dG9uLCBzdWJtaXQgb3IgcmVzZXQuIERlZmF1bHRzIHRvIHN1Ym1pdC4gVGhpcyBoYXMgbm8gZWZmZWN0IG9uIGEgZWxlbWVudHMuICovXG4gIEBJbnB1dCgpIHR5cGUgPSAnYnV0dG9uJztcblxuICAvKiogV2hlbiB0cnVlIHRoZSBidXR0b24gaXMgcGxhY2UgaW4gYSBsb2FkaW5nIHN0YXRlLCB3aGVyZSBhIHNwaW5uZXIgaXMgc2hvd24gd2l0aCB0aGUgbG9hZGluZyB0ZXh0ICovXG4gIEBJbnB1dCgpIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIC8qKiBUZXh0IHRvIHNob3cgd2hlbiBpbiBsb2FkaW5nIHN0YXRlLCBkZWZhdWx0IGlzICdMb2FkaW5nJyAqL1xuICBASW5wdXQoKSBsb2FkaW5nVGV4dCA9ICdMb2FkaW5nJztcblxuICAvKiogIFdoZXRoZXIgdGhlIGJ1dHRvbiBzaG91bGQgYmUgZGlzYWJsZWQuIEZvciBidXR0b24gYW5kIGlucHV0IGVsZW1lbnRzLCBkaXNhYmxlZCAqL1xuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbjtcblxuICAvKiogUHJldmVudCB0aGUgY2xpY2sgZnJvbSBleGVjdXRpbmcgaWYgd2UgYXJlIGxvYWRpbmcgKi9cbiAgb25DbGljayA9IChldmVudCkgPT4ge1xuICAgIGlmICh0aGlzLmRpc2FibGVkIHx8IHRoaXMuaXNMb2FkaW5nKSB7cmV0dXJuO31cblxuICAgIHRoaXMuYnV0dG9uQ2xpY2suZW1pdCh7b3JpZ2luRXZlbnQ6IGV2ZW50LCBpZDogdGhpcy5pZH0pO1xuXG4gICAgaWYgKHRoaXMuY2xpY2spIHt0aGlzLmNsaWNrKCk7fVxuICB9O1xufVxuIl19