@energycap/components 0.46.1 → 0.46.3

package/fesm2022/energycap-components.mjs

@@ -4020,11 +4020,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
 class SpinnerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SpinnerComponent, isStandalone: false, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SpinnerComponent, isStandalone: false, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n</div>\n", styles: ["@keyframes bblFadInOut{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.spinner{display:flex;gap:7px;align-items:center}.spinner-dot{width:17.5px;height:17.5px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}:host(.spinner-small) .spinner{display:flex;gap:3.2px;align-items:center}:host(.spinner-small) .spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.32s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.16s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:0s}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-spinner', standalone: false, template: "<div class=\"spinner\">\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }]
+            args: [{ selector: 'ec-spinner', standalone: false, template: "<div class=\"spinner\">\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n</div>\n", styles: ["@keyframes bblFadInOut{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.spinner{display:flex;gap:7px;align-items:center}.spinner-dot{width:17.5px;height:17.5px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}:host(.spinner-small) .spinner{display:flex;gap:3.2px;align-items:center}:host(.spinner-small) .spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.32s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.16s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:0s}\n"] }]
         }] });
 
 class Overlay {
@@ -9635,6 +9635,12 @@ class RadioButtonComponent extends FormControlBase {
          * @default 'row'
          */
         this.direction = "row";
+        /**
+         * When true, only icons are displayed in toggle options — labels are hidden even if present on the option.
+         * Only applies when type is 'toggle'.
+         * @default false
+         */
+        this.iconOnly = false;
         /**
         * 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
@@ -9650,9 +9656,13 @@ class RadioButtonComponent extends FormControlBase {
         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) {
+        // If the formModel starts with no value, initialise to the first option immediately
+        if ((this.formModel.value === undefined || this.formModel.value === null) && this.options.length > 0) {
+            this.formModel.setValue(this.options[0].value, { emitEvent: false });
+        }
+        // Also handle the case where the value is reset to null/undefined after init
+        this.formModel.valueChanges.pipe(takeUntil(this.componentDestroyed)).subscribe(() => {
+            if ((this.formModel.value === undefined || this.formModel.value === null) && this.options.length > 0) {
                 this.formModel.setValue(this.options[0].value);
             }
         });
@@ -9666,17 +9676,19 @@ class RadioButtonComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioButtonComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: RadioButtonComponent, isStandalone: false, 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\"\n  [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n    [ngClass]=\"currentClasses\"\n    [class.is-disabled]=\"formModel.disabled\"\n    [class.is-readonly]=\"readonly\">\n\n    <!-- RadioButton type=\"toggle\"-->\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n    @if (type === 'toggle') {\n      @for (option of options; track option; let i = $index; let isFirst = $first) {\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n        the tabbing did not work, and with the other the controls were all linked together.  They both need set\n        for the best of both worlds -->\n        <input [attr.id]=\"inputId + i.toString()\"\n          [formControl]=\"formModel\"\n          type=\"radio\"\n          tabindex=\"{{tabindex}}\"\n          [value]=\"option.value\"\n          #radioInput\n          name=\"{{name}}\"\n          attr.name=\"{{name}}\"\n          [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n          <label [attr.for]=\"inputId + i.toString()\"\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            @if (option.icon) {\n              <i class=\"ec-icon {{option.icon}}\"\n              ></i>\n            }\n            @if (option.label) {\n              <span id=\"{{inputId}}_label{{i.toString()}}\"\n              >{{option.label | translate}}</span>\n            }\n          </label>\n        }\n        <a>\n          <div class=\"toggle-handle\"></div>\n        </a>\n        <div class=\"toggle-focused\"></div>\n      }\n\n      <!-- RadioButton type=\"radio\"-->\n      <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n      @if (type === 'radio') {\n        @for (option of options; track option; let i = $index; let isFirst = $first) {\n          <label class='radio-button'\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n            the tabbing did not work, and with the other the controls were all linked together.  They both need set\n            for the best of both worlds -->\n            <input [attr.id]=\"inputId + i.toString()\"\n              class=\"input\"\n              [formControl]=\"formModel\"\n              type=\"radio\"\n              value=\"{{option.value}}\"\n              #radioInput\n              tabindex=\"{{tabindex}}\"\n              name=\"{{name}}\"\n              attr.name=\"{{name}}\"\n              [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n              <span class=\"indicator\"></span>\n              @if (option.label) {\n                <span id=\"{{inputId}}_label{{i.toString()}}\"\n                  class=\"label\"\n                [innerHtml]=\"option.label | translate\"></span>\n              }\n            </label>\n          }\n        }\n\n      </div>\n\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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: RadioButtonComponent, isStandalone: false, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", iconOnly: "iconOnly", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\n  [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n    [ngClass]=\"currentClasses\"\n    [class.is-disabled]=\"formModel.disabled\"\n    [class.is-readonly]=\"readonly\">\n\n    <!-- RadioButton type=\"toggle\"-->\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n    @if (type === 'toggle') {\n      @for (option of options; track option; let i = $index; let isFirst = $first) {\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n        the tabbing did not work, and with the other the controls were all linked together.  They both need set\n        for the best of both worlds -->\n        <input [attr.id]=\"inputId + i.toString()\"\n          [formControl]=\"formModel\"\n          type=\"radio\"\n          tabindex=\"{{tabindex}}\"\n          [value]=\"option.value\"\n          #radioInput\n          name=\"{{name}}\"\n          attr.name=\"{{name}}\"\n          [attr.aria-label]=\"iconOnly ? ((option.label || option.tooltip || option.value) | translate) : null\"\n          [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n          <label [attr.for]=\"inputId + i.toString()\"\n            [class.is-selected]=\"formModel.value === option.value\"\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            @if (option.icon) {\n              <i class=\"ec-icon {{option.icon}}\" aria-hidden=\"true\"></i>\n            }\n            @if (option.label && !iconOnly) {\n              <span id=\"{{inputId}}_label{{i.toString()}}\"\n              >{{option.label | translate}}</span>\n            }\n            @if (option.label && iconOnly) {\n              <span class=\"sr-only\">{{option.label | translate}}</span>\n            }\n          </label>\n        }\n        <a>\n          <div class=\"toggle-handle\"></div>\n        </a>\n        <div class=\"toggle-focused\"></div>\n      }\n\n      <!-- RadioButton type=\"radio\"-->\n      <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n      @if (type === 'radio') {\n        @for (option of options; track option; let i = $index; let isFirst = $first) {\n          <label class='radio-button'\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n            the tabbing did not work, and with the other the controls were all linked together.  They both need set\n            for the best of both worlds -->\n            <input [attr.id]=\"inputId + i.toString()\"\n              class=\"input\"\n              [formControl]=\"formModel\"\n              type=\"radio\"\n              value=\"{{option.value}}\"\n              #radioInput\n              tabindex=\"{{tabindex}}\"\n              name=\"{{name}}\"\n              attr.name=\"{{name}}\"\n              [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n              <span class=\"indicator\"></span>\n              @if (option.label) {\n                <span id=\"{{inputId}}_label{{i.toString()}}\"\n                  class=\"label\"\n                [innerHtml]=\"option.label | translate\"></span>\n              }\n            </label>\n          }\n        }\n\n      </div>\n\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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.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%;gap:.25rem;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 label.is-selected{color:var(--ec-color-interactive)}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-radiobutton', standalone: false, template: "<div class=\"control\"\n  [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n    [ngClass]=\"currentClasses\"\n    [class.is-disabled]=\"formModel.disabled\"\n    [class.is-readonly]=\"readonly\">\n\n    <!-- RadioButton type=\"toggle\"-->\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n    @if (type === 'toggle') {\n      @for (option of options; track option; let i = $index; let isFirst = $first) {\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n        the tabbing did not work, and with the other the controls were all linked together.  They both need set\n        for the best of both worlds -->\n        <input [attr.id]=\"inputId + i.toString()\"\n          [formControl]=\"formModel\"\n          type=\"radio\"\n          tabindex=\"{{tabindex}}\"\n          [value]=\"option.value\"\n          #radioInput\n          name=\"{{name}}\"\n          attr.name=\"{{name}}\"\n          [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n          <label [attr.for]=\"inputId + i.toString()\"\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            @if (option.icon) {\n              <i class=\"ec-icon {{option.icon}}\"\n              ></i>\n            }\n            @if (option.label) {\n              <span id=\"{{inputId}}_label{{i.toString()}}\"\n              >{{option.label | translate}}</span>\n            }\n          </label>\n        }\n        <a>\n          <div class=\"toggle-handle\"></div>\n        </a>\n        <div class=\"toggle-focused\"></div>\n      }\n\n      <!-- RadioButton type=\"radio\"-->\n      <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n      @if (type === 'radio') {\n        @for (option of options; track option; let i = $index; let isFirst = $first) {\n          <label class='radio-button'\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n            the tabbing did not work, and with the other the controls were all linked together.  They both need set\n            for the best of both worlds -->\n            <input [attr.id]=\"inputId + i.toString()\"\n              class=\"input\"\n              [formControl]=\"formModel\"\n              type=\"radio\"\n              value=\"{{option.value}}\"\n              #radioInput\n              tabindex=\"{{tabindex}}\"\n              name=\"{{name}}\"\n              attr.name=\"{{name}}\"\n              [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n              <span class=\"indicator\"></span>\n              @if (option.label) {\n                <span id=\"{{inputId}}_label{{i.toString()}}\"\n                  class=\"label\"\n                [innerHtml]=\"option.label | translate\"></span>\n              }\n            </label>\n          }\n        }\n\n      </div>\n\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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.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"] }]
+            args: [{ selector: 'ec-radiobutton', standalone: false, template: "<div class=\"control\"\n  [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n    [ngClass]=\"currentClasses\"\n    [class.is-disabled]=\"formModel.disabled\"\n    [class.is-readonly]=\"readonly\">\n\n    <!-- RadioButton type=\"toggle\"-->\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n    @if (type === 'toggle') {\n      @for (option of options; track option; let i = $index; let isFirst = $first) {\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n        the tabbing did not work, and with the other the controls were all linked together.  They both need set\n        for the best of both worlds -->\n        <input [attr.id]=\"inputId + i.toString()\"\n          [formControl]=\"formModel\"\n          type=\"radio\"\n          tabindex=\"{{tabindex}}\"\n          [value]=\"option.value\"\n          #radioInput\n          name=\"{{name}}\"\n          attr.name=\"{{name}}\"\n          [attr.aria-label]=\"iconOnly ? ((option.label || option.tooltip || option.value) | translate) : null\"\n          [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n          <label [attr.for]=\"inputId + i.toString()\"\n            [class.is-selected]=\"formModel.value === option.value\"\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            @if (option.icon) {\n              <i class=\"ec-icon {{option.icon}}\" aria-hidden=\"true\"></i>\n            }\n            @if (option.label && !iconOnly) {\n              <span id=\"{{inputId}}_label{{i.toString()}}\"\n              >{{option.label | translate}}</span>\n            }\n            @if (option.label && iconOnly) {\n              <span class=\"sr-only\">{{option.label | translate}}</span>\n            }\n          </label>\n        }\n        <a>\n          <div class=\"toggle-handle\"></div>\n        </a>\n        <div class=\"toggle-focused\"></div>\n      }\n\n      <!-- RadioButton type=\"radio\"-->\n      <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n      @if (type === 'radio') {\n        @for (option of options; track option; let i = $index; let isFirst = $first) {\n          <label class='radio-button'\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n            the tabbing did not work, and with the other the controls were all linked together.  They both need set\n            for the best of both worlds -->\n            <input [attr.id]=\"inputId + i.toString()\"\n              class=\"input\"\n              [formControl]=\"formModel\"\n              type=\"radio\"\n              value=\"{{option.value}}\"\n              #radioInput\n              tabindex=\"{{tabindex}}\"\n              name=\"{{name}}\"\n              attr.name=\"{{name}}\"\n              [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n              <span class=\"indicator\"></span>\n              @if (option.label) {\n                <span id=\"{{inputId}}_label{{i.toString()}}\"\n                  class=\"label\"\n                [innerHtml]=\"option.label | translate\"></span>\n              }\n            </label>\n          }\n        }\n\n      </div>\n\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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.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%;gap:.25rem;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 label.is-selected{color:var(--ec-color-interactive)}.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: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { type: [{
                 type: Input
             }], options: [{
                 type: Input
             }], direction: [{
                 type: Input
+            }], iconOnly: [{
+                type: Input
             }], name: [{
                 type: Input
             }], inputElement: [{