import { __decorate, __metadata } from "tslib";
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, HostBinding, TemplateRef } from '@angular/core';
var ButtonComponent = /** @class */ (function () {
    function ButtonComponent() {
        /**
         * Is the button disabled?
         */
        this.disabled = false;
        /**
         * The tabindex of the control
         */
        this.tabindex = 0;
        /**
         * The type of button
         */
        this.type = "common";
        /**
         * The pending status of the control, can be used to tell the user the control is
         * awaiting via a spinner or animation
         */
        this.pending = false;
        /**
         * If true, the button element's type will be set to submit so that hitting "enter"
         * on a form will trigger the button's action.
         */
        this.isSubmit = false;
        /**
         * Emit an event when the button element is clicked (not the icon)
         */
        this.clicked = new EventEmitter();
    }
    /**
     * Ensure label or icon is set
     *
     */
    ButtonComponent.prototype.ngOnInit = function () {
        if (!this.label && !this.icon && !this.customTemplate) {
            throw new Error('ButtonComponent requires an icon, a label, or both');
        }
        if (this.id) {
            this.attrId = this.id;
        }
    };
    ButtonComponent.prototype.ngOnChanges = function (changes) {
        if (changes.id && changes.id.currentValue) {
            this.attrId = changes.id.currentValue;
        }
    };
    /**
     * Event handler for click event on the button element.
     * Blur the button so focus style does not persist
     *
     */
    ButtonComponent.prototype.onClick = function (event) {
        if (this.pending || this.disabled) {
            event.stopImmediatePropagation();
        }
        else {
            this.clicked.emit(event);
        }
    };
    ButtonComponent.prototype.focus = function () {
        this.buttonElement.nativeElement.focus();
    };
    __decorate([
        HostBinding('attr.id'),
        __metadata("design:type", String)
    ], ButtonComponent.prototype, "attrId", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], ButtonComponent.prototype, "id", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Boolean)
    ], ButtonComponent.prototype, "disabled", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], ButtonComponent.prototype, "icon", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], ButtonComponent.prototype, "label", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Object)
    ], ButtonComponent.prototype, "badge", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Number)
    ], ButtonComponent.prototype, "tabindex", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], ButtonComponent.prototype, "type", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Boolean)
    ], ButtonComponent.prototype, "pending", void 0);
    __decorate([
        Input(),
        __metadata("design:type", TemplateRef)
    ], ButtonComponent.prototype, "customTemplate", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Boolean)
    ], ButtonComponent.prototype, "isSubmit", void 0);
    __decorate([
        Output(),
        __metadata("design:type", EventEmitter)
    ], ButtonComponent.prototype, "clicked", void 0);
    __decorate([
        ViewChild('element', { static: true }),
        __metadata("design:type", ElementRef)
    ], ButtonComponent.prototype, "buttonElement", void 0);
    ButtonComponent = __decorate([
        Component({
            selector: 'ec-button',
            template: "<button id=\"{{id}}_button\"\r\n        class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n        [class.has-badge]=\"badge\"\r\n        [class.is-pending]=\"pending\"\r\n        tabindex=\"{{tabindex}}\"\r\n        [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"onClick($event)\"\r\n        #element>\r\n    <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n    <ec-icon [icon]=\"icon\" id=\"{{id}}_icon\" *ngIf=\"icon\"></ec-icon>\r\n\r\n    <ng-container *ngIf=\"label\">\r\n        <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"badge\">\r\n        <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n    </ng-container>\r\n    \r\n    <!-- Hidden when the button is not pending -->\r\n    <div class=\"pending-container\">\r\n        <ec-icon icon=\"icon-ui-loading\" id=\"{{id}}_pending\"></ec-icon>\r\n    </div>\r\n</ng-template>",
            styles: ["@-webkit-keyframes spin{from{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:#1a1a23;font-size:.875rem;font-family:Roboto,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Oxygen,Ubuntu,\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",sans-serif;padding:0;margin:0;display:inline-block;-webkit-appearance:none}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-custom,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-icon,:host(.active) .ec-button-link,:host(.active) .ec-button-text{background-color:#bfe0e9}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:#0084a9}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) ec-icon{width:.625rem;height:.625rem}:host-context(.card-actions):not(.active):not(.is-tab) .ec-button-icon,:host-context(.ec-grid-actions):not(.active):not(.is-tab) .ec-button-icon,:host-context(.grid-actions):not(.active):not(.is-tab) .ec-button-icon{color:#0084a9}:host-context(.btn-group) button:focus{position:relative;z-index:1}.ec-button-primary,.ec-button-submit{background-color:#cfd856;border-color:#c1cd23;color:#1a1a23}.ec-button-primary:active:enabled,.ec-button-submit:active:enabled{background-color:#c1cd23;color:#1a1a23}.ec-button-secondary{background-color:#fff;border-color:#d2d7d9;color:rgba(26,26,35,.66)}.ec-button-secondary:active:enabled{background-color:#fff;color:#1a1a23}.ec-button-common{background-color:#2d9ab8;border-color:#0084a9;color:#fff}.ec-button-common:active:enabled{background-color:#0084a9;border-color:#005f7a}.ec-button-icon{background-color:transparent;color:#5e6d79;width:2rem;padding:0}.ec-button-icon ec-icon{height:1.14286em;margin:0;padding:0}.ec-button-icon:hover{background-color:#bfe0e9}.ec-button-icon:active{color:#354751}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled ec-icon{opacity:.5}.ec-button-icon.has-badge{width:auto;padding-left:.375rem;padding-right:.375rem}.ec-button-text{background-color:transparent;color:#1a1a23}.ec-button-text:active:enabled{background-color:transparent;color:#000}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:#0084a9}.ec-button-link:active:enabled{background-color:transparent;color:#00485d}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:#e64c4d;border-color:#e33436;color:#fff}.ec-button-danger:active:enabled{background-color:#e33436}.ec-button-danger-text{background-color:transparent;color:#e33436}.ec-button-danger-text:active:enabled{background-color:transparent;color:#b2191a}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{height:2rem;padding:.35714em .57143em;align-items:center;background-color:#fff;display:flex;cursor:pointer;transition:background-color .5s,box-shadow .3s,border-color .3s,color .3s;font-size:.875rem;line-height:1.25rem;justify-content:center;border:.0625rem solid transparent;border-radius:0}button.is-highlighted,button.is-selected{background-color:#d9edf2}button:focus{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;outline:0}button:active{background-color:#0084a9;color:#fff}button.is-disabled,button:disabled{background-color:rgba(26,26,35,.1);border-color:#d2d7d9;color:rgba(26,26,35,.66);opacity:.65;cursor:default}button .label{align-items:center;display:flex;flex:auto}button ec-icon{flex:0 0 auto;color:inherit}button .label{white-space:nowrap;justify-content:center}button ec-icon+.label{margin:0 .375rem 0 .5rem;flex:none}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{font-size:.625rem;font-weight:700;padding:.125rem .25rem;border-radius:.4375rem;min-width:.875rem;background-color:#6f1c8a}:host(.is-tab) button{align-items:center;border:1px solid transparent;border-radius:0;color:#5e6d79;cursor:pointer;font-size:.75rem;display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{color:#354751;background-color:#d2d7d9}:host(.is-tab) button:focus{outline:0}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none}:host(.is-tab) button.is-disabled{color:rgba(26,26,35,.38);cursor:default}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:#354751;background-color:#d2d7d9}.pending-container{display:none;align-items:center;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.pending-container .icon-ui-loading{flex:none}.is-pending{position:relative}.is-pending .badge,.is-pending .label,.is-pending ec-icon:not(.icon-ui-loading){opacity:0}.is-pending .pending-container{display:flex}"]
        }),
        __metadata("design:paramtypes", [])
    ], ButtonComponent);
    return ButtonComponent;
}());
export { ButtonComponent };
//# sourceMappingURL=data:application/json;base64, 