import { __decorate, __metadata } from "tslib";
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { ValidationMessageService } from '../../core/validation-message.service';
import { FormGroupHelper } from '../../shared/form-group.helper';
import { FormControlBase } from '../form-control-base';
let RadioButtonComponent = 
/**
 * A single or group of radio button. Only one option can be checked
 * at a time
 */
class RadioButtonComponent extends FormControlBase {
    constructor(validationMessageService, formGroupHelper) {
        super(validationMessageService, formGroupHelper);
        this.validationMessageService = validationMessageService;
        this.formGroupHelper = formGroupHelper;
        /**
         * Display the radio button options as a default set of radio button inputs or
         * as a toggle switch
         * @default 'radio'
         */
        this.type = "radio";
        /**
         * One or more options to display
         */
        this.options = [];
        /**
         * If there is more than one option, display them in a row or column.
         * @default 'row'
         */
        this.direction = "row";
        /**
        * The name of the radio input element used to group radio elements
        * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
        */
        this.name = '';
    }
    ngOnInit() {
        super.ngOnInit();
        this.currentClasses = [];
        if (this.type === 'toggle') {
            this.currentClasses.push('radio-group-toggle');
        }
        else if (this.direction === 'column') {
            this.currentClasses.push('radio-group-column');
        }
        // If the formModel is assigned an undefined or null value, set it to the first option
        this.formModel.valueChanges.subscribe(() => {
            if (this.formModel.value === undefined || this.formModel.value === null) {
                this.formModel.setValue(this.options[0].value);
            }
        });
    }
    ngAfterViewInit() {
        if (this.autofocus) {
            this.inputElement.nativeElement.focus();
        }
        if (this.options.length > 5 && this.type === "toggle") {
            console.warn("Radio button components with a type of toggle cannot have more than 5 options");
        }
    }
};
RadioButtonComponent.ctorParameters = () => [
    { type: ValidationMessageService },
    { type: FormGroupHelper }
];
__decorate([
    Input(),
    __metadata("design:type", String)
], RadioButtonComponent.prototype, "type", void 0);
__decorate([
    Input(),
    __metadata("design:type", Array)
], RadioButtonComponent.prototype, "options", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], RadioButtonComponent.prototype, "direction", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], RadioButtonComponent.prototype, "name", void 0);
__decorate([
    ViewChild('radioInput'),
    __metadata("design:type", ElementRef)
], RadioButtonComponent.prototype, "inputElement", void 0);
RadioButtonComponent = __decorate([
    Component({
        selector: 'ec-radiobutton',
        template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n\r\n\r\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n       [ngClass]=\"currentClasses\"\r\n       [class.is-disabled]=\"formModel.disabled\"\r\n       [class.is-readonly]=\"readonly\">\r\n\r\n    <!-- RadioButton type=\"toggle\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'toggle'\">\r\n      <ng-container *ngFor=\"let option of options; index as i;\">\r\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n        <input [attr.id]=\"inputId + i.toString()\"\r\n               [formControl]=\"formModel\"\r\n               type=\"radio\"\r\n               tabindex=\"{{tabindex}}\"\r\n               [value]=\"option.value\"\r\n               #radioInput\r\n               name=\"{{name}}\"\r\n               attr.name=\"{{name}}\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <ec-icon [icon]=\"option.icon\" *ngIf=\"option.icon\"></ec-icon>\r\n          <span *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n        </label>\r\n      </ng-container>\r\n      <a>\r\n        <div class=\"toggle-handle\"></div>\r\n      </a>\r\n      <div class=\"toggle-focused\"></div>\r\n    </ng-container>\r\n\r\n    <!-- RadioButton type=\"radio\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'radio'\">\r\n      <ng-container *ngFor=\"let option of options; index as i;\">\r\n        <label class='radio-button'\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n          <input [attr.id]=\"inputId + i.toString()\"\r\n                 class=\"input\"\r\n                 [formControl]=\"formModel\"\r\n                 type=\"radio\"\r\n                 value=\"{{option.value}}\"\r\n                 #radioInput\r\n                 tabindex=\"{{tabindex}}\"\r\n                 name=\"{{name}}\"\r\n                 attr.name=\"{{name}}\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label\"\r\n                class=\"label\"\r\n                *ngIf=\"option.label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n        </label>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</div>\r\n",
        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-family:Roboto,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Oxygen,Ubuntu,\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",sans-serif;font-size:1rem;display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input{border-color:transparent;background-color:rgba(26,26,35,.12);background-image:none;color:#1a1a23;opacity:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:#fff8cc;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%235e6d79\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25em center;background-size:1em 1em;padding-left:1.5em}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:#ffe433}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:#fff8cc}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:#ffe433}:host .textbox-group{display:flex;position:relative}:host input:focus,:host textarea:focus{outline:0}:host(.w-auto){width:auto}.control>label{color:rgba(26,26,35,.66);display:block;font-size:.75rem;line-height:1;margin:.375rem 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:rgba(26,26,35,.12);border:0}.radio-group.is-readonly .radio-button .indicator,.radio-group.is-readonly .radio-button .label{opacity:1;color:#1a1a23}.radio-group.is-readonly.radio-group-toggle{border-color:transparent;background-color:rgba(26,26,35,.12);background-image:none;color:#1a1a23;opacity:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:first-child){margin-left:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:checked~.indicator{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-4 -4 8 8\"><circle r=\"3\" fill=\"%230084a9\"/></svg>');background-color:#fff}.input:checked:disabled~.indicator{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-4 -4 8 8\"><circle r=\"3\" fill=\"rgba(26, 26, 35, 0.66)\"/></svg>')}.input:focus~.indicator{border-color:#0084a9;box-shadow:0 0 0 1px #0084a9}.input:disabled~.indicator{background-color:rgba(26,26,35,.1);opacity:.65}.input:disabled~.label{color:rgba(26,26,35,.66);opacity:.65}.indicator{margin-top:.5rem;background-repeat:no-repeat;background-position:center;background-color:#fff;background-size:.75rem;border:.0625rem solid #d2d7d9;display:block;flex:0 0 auto;width:1rem;height:1rem;pointer-events:none;border-radius:50%}.label{line-height:1.25;padding:.375em 0;margin-left:.25rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:1rem;background-color:#d2d7d9;border-radius:0;border:.0625rem solid #d2d7d9;min-height:2em;position:relative;color:rgba(26,26,35,.38);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:#0084a9}.radio-group-toggle input:checked:last-of-type~a{transform:translateX(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;top:0;left:0;bottom:0;right:0;box-shadow:0 0 0 .125rem #0084a9;display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s;z-index:2}.radio-group-toggle label ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:0;display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:#fff;border-radius:0;height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:rgba(26,26,35,.1);color:rgba(26,26,35,.66)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:rgba(255,255,255,.38)}.toggle-options-3 a{width:33.33333%}.toggle-options-3 input:checked:last-of-type~a{transform:translateX(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translateX(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translateX(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translateX(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translateX(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translateX(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translateX(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translateX(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translateX(100%)}"]
    })
    /**
     * A single or group of radio button. Only one option can be checked
     * at a time
     */
    ,
    __metadata("design:paramtypes", [ValidationMessageService,
        FormGroupHelper])
], RadioButtonComponent);
export { RadioButtonComponent };
//# sourceMappingURL=data:application/json;base64, 