import { Component, Input, ViewChild } from '@angular/core';
import { FormControlBase } from '../form-control-base';
import * as i0 from "@angular/core";
import * as i1 from "../../core/validation-message.service";
import * as i2 from "../../shared/form-group.helper";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "../help-popover/help-popover.component";
import * as i6 from "@ngx-translate/core";
/**
 * A single or group of radio button. Only one option can be checked
 * at a time
 */
export 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");
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n\r\n  <label *ngIf=\"label\">\r\n    <span>{{label | translate}}</span>\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors | translate}}</span>\r\n    <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                     *ngIf=\"helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{helpPopover | translate}}\"\r\n                     contentPosition=\"{{helpPopoverPosition}}\">\r\n    </ec-help-popover>\r\n  </label>\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; first as isFirst\">\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               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\"\r\n             *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                *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; first as isFirst\">\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                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\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>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);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,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-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:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 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{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-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(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);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 ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ec-radiobutton', template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n\r\n  <label *ngIf=\"label\">\r\n    <span>{{label | translate}}</span>\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors | translate}}</span>\r\n    <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                     *ngIf=\"helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{helpPopover | translate}}\"\r\n                     contentPosition=\"{{helpPopoverPosition}}\">\r\n    </ec-help-popover>\r\n  </label>\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; first as isFirst\">\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               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\"\r\n             *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                *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; first as isFirst\">\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                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\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>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);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,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-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:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 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{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-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(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);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 ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
        }], ctorParameters: () => [{ type: i1.ValidationMessageService }, { type: i2.FormGroupHelper }], propDecorators: { type: [{
                type: Input
            }], options: [{
                type: Input
            }], direction: [{
                type: Input
            }], name: [{
                type: Input
            }], inputElement: [{
                type: ViewChild,
                args: ['radioInput']
            }] } });
//# sourceMappingURL=data:application/json;base64, 