@skyux/forms 11.3.0 → 11.4.0

package/fesm2022/skyux-forms.mjs

@@ -39,10 +39,10 @@ const RESOURCES = {
         },
         skyux_form_error_date: { message: 'Select or enter a valid date.' },
         skyux_form_error_date_max: {
-            message: 'Select or enter a date before the max date.',
+            message: 'Select or enter a date on or before {0}.',
         },
         skyux_form_error_date_min: {
-            message: 'Select or enter a date after the min date.',
+            message: 'Select or enter a date on or after {0}.',
         },
         skyux_form_error_fuzzy_date_future_disabled: {
             message: 'Future dates are disabled, select or enter a date in the past.',
@@ -51,10 +51,10 @@ const RESOURCES = {
             message: 'Select or enter a valid date.',
         },
         skyux_form_error_fuzzy_date_max_date: {
-            message: 'Select or enter a date before the max date.',
+            message: 'Select or enter a date on or before {0}.',
         },
         skyux_form_error_fuzzy_date_min_date: {
-            message: 'Select or enter a date after the min date.',
+            message: 'Select or enter a date on or after {0}.',
         },
         skyux_form_error_fuzzy_date_year_required: { message: 'Year is required.' },
         skyux_form_error_email: {
@@ -470,11 +470,11 @@ class SkyFormErrorsComponent {
         this.ariaRelevant = 'all';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyFormErrorsComponent, isStandalone: true, selector: "sky-form-errors", inputs: { errors: "errors", labelText: "labelText", touched: ["touched", "touched", booleanAttribute], dirty: ["dirty", "dirty", booleanAttribute] }, host: { properties: { "attr.aria-atomic": "this.ariaAtomic", "attr.aria-live": "this.ariaLive", "attr.aria-relevant": "this.ariaRelevant" } }, ngImport: i0, template: "@if (labelText) {\n  @if (touched) {\n    @if (errors?.['required']) {\n      <sky-form-error\n        errorName=\"required\"\n        [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n      />\n    }\n\n    @if (errors?.['minlength']; as minLengthError) {\n      <sky-form-error\n        errorName=\"minlength\"\n        [errorText]=\"\n          'skyux_form_error_minlength'\n            | skyLibResources: labelText : minLengthError.requiredLength\n        \"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"invalidDate\"\n        [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"minDate\"\n        [errorText]=\"'skyux_form_error_date_min' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"maxDate\"\n        [errorText]=\"'skyux_form_error_date_max' | skyLibResources\"\n      />\n    }\n\n    @if (\n      errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['futureDisabled']\n    ) {\n      <sky-form-error\n        errorName=\"fuzzyFutureDisabled\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"fuzzyInvalidDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMaxDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_max_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMinDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_min_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['yearRequired']) {\n      <sky-form-error\n        errorName=\"fuzzyYearRequired\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyEmail']) {\n      <sky-form-error\n        errorName=\"email\"\n        [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyPhoneField']) {\n      <sky-form-error\n        errorName=\"phone\"\n        [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyTime']) {\n      <sky-form-error\n        errorName=\"time\"\n        [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyUrl']) {\n      <sky-form-error\n        errorName=\"url\"\n        [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n      />\n    }\n  }\n\n  @if (touched || dirty) {\n    @if (errors?.['maxlength']; as maxLengthError) {\n      <sky-form-error\n        errorName=\"maxlength\"\n        [errorText]=\"\n          'skyux_form_error_maxlength'\n            | skyLibResources: labelText : maxLengthError.requiredLength\n        \"\n      />\n    }\n    <ng-content />\n  }\n}\n", styles: ["sky-status-indicator{display:block;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: SkyIdModule }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyFormErrorsComponent, isStandalone: true, selector: "sky-form-errors", inputs: { errors: "errors", labelText: "labelText", touched: ["touched", "touched", booleanAttribute], dirty: ["dirty", "dirty", booleanAttribute] }, host: { properties: { "attr.aria-atomic": "this.ariaAtomic", "attr.aria-live": "this.ariaLive", "attr.aria-relevant": "this.ariaRelevant" } }, ngImport: i0, template: "@if (labelText) {\n  @if (touched) {\n    @if (errors?.['required']) {\n      <sky-form-error\n        errorName=\"required\"\n        [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n      />\n    }\n\n    @if (errors?.['minlength']; as minLengthError) {\n      <sky-form-error\n        errorName=\"minlength\"\n        [errorText]=\"\n          'skyux_form_error_minlength'\n            | skyLibResources: labelText : minLengthError.requiredLength\n        \"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"invalidDate\"\n        [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"minDate\"\n        [errorText]=\"\n          'skyux_form_error_date_min'\n            | skyLibResources: errors?.['skyDate']['minDateFormatted']\n        \"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"maxDate\"\n        [errorText]=\"\n          'skyux_form_error_date_max'\n            | skyLibResources: errors?.['skyDate']['maxDateFormatted']\n        \"\n      />\n    }\n\n    @if (\n      errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['futureDisabled']\n    ) {\n      <sky-form-error\n        errorName=\"fuzzyFutureDisabled\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"fuzzyInvalidDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMaxDate\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_max_date'\n            | skyLibResources: errors?.['skyFuzzyDate']['maxDateFormatted']\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMinDate\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_min_date'\n            | skyLibResources\n              : errors?.['skyFuzzyDate'] &&\n                  errors?.['skyFuzzyDate']['minDateFormatted']\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['yearRequired']) {\n      <sky-form-error\n        errorName=\"fuzzyYearRequired\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyEmail']) {\n      <sky-form-error\n        errorName=\"email\"\n        [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyPhoneField']) {\n      <sky-form-error\n        errorName=\"phone\"\n        [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyTime']) {\n      <sky-form-error\n        errorName=\"time\"\n        [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyUrl']) {\n      <sky-form-error\n        errorName=\"url\"\n        [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n      />\n    }\n  }\n\n  @if (touched || dirty) {\n    @if (errors?.['maxlength']; as maxLengthError) {\n      <sky-form-error\n        errorName=\"maxlength\"\n        [errorText]=\"\n          'skyux_form_error_maxlength'\n            | skyLibResources: labelText : maxLengthError.requiredLength\n        \"\n      />\n    }\n    <ng-content />\n  }\n}\n", styles: ["sky-status-indicator{display:block;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: SkyIdModule }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-form-errors', standalone: true, imports: [SkyIdModule, SkyFormErrorComponent, SkyFormsResourcesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (labelText) {\n  @if (touched) {\n    @if (errors?.['required']) {\n      <sky-form-error\n        errorName=\"required\"\n        [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n      />\n    }\n\n    @if (errors?.['minlength']; as minLengthError) {\n      <sky-form-error\n        errorName=\"minlength\"\n        [errorText]=\"\n          'skyux_form_error_minlength'\n            | skyLibResources: labelText : minLengthError.requiredLength\n        \"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"invalidDate\"\n        [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"minDate\"\n        [errorText]=\"'skyux_form_error_date_min' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"maxDate\"\n        [errorText]=\"'skyux_form_error_date_max' | skyLibResources\"\n      />\n    }\n\n    @if (\n      errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['futureDisabled']\n    ) {\n      <sky-form-error\n        errorName=\"fuzzyFutureDisabled\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"fuzzyInvalidDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMaxDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_max_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMinDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_min_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['yearRequired']) {\n      <sky-form-error\n        errorName=\"fuzzyYearRequired\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyEmail']) {\n      <sky-form-error\n        errorName=\"email\"\n        [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyPhoneField']) {\n      <sky-form-error\n        errorName=\"phone\"\n        [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyTime']) {\n      <sky-form-error\n        errorName=\"time\"\n        [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyUrl']) {\n      <sky-form-error\n        errorName=\"url\"\n        [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n      />\n    }\n  }\n\n  @if (touched || dirty) {\n    @if (errors?.['maxlength']; as maxLengthError) {\n      <sky-form-error\n        errorName=\"maxlength\"\n        [errorText]=\"\n          'skyux_form_error_maxlength'\n            | skyLibResources: labelText : maxLengthError.requiredLength\n        \"\n      />\n    }\n    <ng-content />\n  }\n}\n", styles: ["sky-status-indicator{display:block;line-height:normal}\n"] }]
+            args: [{ selector: 'sky-form-errors', standalone: true, imports: [SkyIdModule, SkyFormErrorComponent, SkyFormsResourcesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (labelText) {\n  @if (touched) {\n    @if (errors?.['required']) {\n      <sky-form-error\n        errorName=\"required\"\n        [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n      />\n    }\n\n    @if (errors?.['minlength']; as minLengthError) {\n      <sky-form-error\n        errorName=\"minlength\"\n        [errorText]=\"\n          'skyux_form_error_minlength'\n            | skyLibResources: labelText : minLengthError.requiredLength\n        \"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"invalidDate\"\n        [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"minDate\"\n        [errorText]=\"\n          'skyux_form_error_date_min'\n            | skyLibResources: errors?.['skyDate']['minDateFormatted']\n        \"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"maxDate\"\n        [errorText]=\"\n          'skyux_form_error_date_max'\n            | skyLibResources: errors?.['skyDate']['maxDateFormatted']\n        \"\n      />\n    }\n\n    @if (\n      errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['futureDisabled']\n    ) {\n      <sky-form-error\n        errorName=\"fuzzyFutureDisabled\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"fuzzyInvalidDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMaxDate\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_max_date'\n            | skyLibResources: errors?.['skyFuzzyDate']['maxDateFormatted']\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMinDate\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_min_date'\n            | skyLibResources\n              : errors?.['skyFuzzyDate'] &&\n                  errors?.['skyFuzzyDate']['minDateFormatted']\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['yearRequired']) {\n      <sky-form-error\n        errorName=\"fuzzyYearRequired\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyEmail']) {\n      <sky-form-error\n        errorName=\"email\"\n        [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyPhoneField']) {\n      <sky-form-error\n        errorName=\"phone\"\n        [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyTime']) {\n      <sky-form-error\n        errorName=\"time\"\n        [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyUrl']) {\n      <sky-form-error\n        errorName=\"url\"\n        [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n      />\n    }\n  }\n\n  @if (touched || dirty) {\n    @if (errors?.['maxlength']; as maxLengthError) {\n      <sky-form-error\n        errorName=\"maxlength\"\n        [errorText]=\"\n          'skyux_form_error_maxlength'\n            | skyLibResources: labelText : maxLengthError.requiredLength\n        \"\n      />\n    }\n    <ng-content />\n  }\n}\n", styles: ["sky-status-indicator{display:block;line-height:normal}\n"] }]
         }], propDecorators: { errors: [{
                 type: Input
             }], labelText: [{
@@ -3268,11 +3268,11 @@ class SkyRadioComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #onTouchedCallback;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      @if (icon) {\n        <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n      }\n    </span>\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span class=\"sky-switch-label\">{{ labelText }}</span>\n      }\n    } @else {\n      <ng-content select=\"sky-radio-label\" />\n    }\n  </label>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-radio-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div class=\"sky-font-deemphasized sky-radio-hint-text\">\n      {{ hintText }}\n    </div>\n  }\n</div>\n", styles: [":host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}:host-context(.sky-theme-modern) .sky-switch{display:flex}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      @if (icon) {\n        <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n      }\n    </span>\n    @if (labelText) {\n      <span\n        class=\"sky-switch-label sky-radio-label-text\"\n        [class.sky-screen-reader-only]=\"labelHidden\"\n        >{{ labelText }}</span\n      >\n    } @else {\n      <ng-content select=\"sky-radio-label\" />\n    }\n  </label>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-radio-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div class=\"sky-font-deemphasized sky-radio-hint-text\">\n      {{ hintText }}\n    </div>\n  }\n</div>\n", styles: [":host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}:host-context(.sky-theme-modern) .sky-switch{display:flex}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      @if (icon) {\n        <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n      }\n    </span>\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span class=\"sky-switch-label\">{{ labelText }}</span>\n      }\n    } @else {\n      <ng-content select=\"sky-radio-label\" />\n    }\n  </label>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-radio-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div class=\"sky-font-deemphasized sky-radio-hint-text\">\n      {{ hintText }}\n    </div>\n  }\n</div>\n", styles: [":host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}:host-context(.sky-theme-modern) .sky-switch{display:flex}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch{display:flex}\n"] }]
+            args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      @if (icon) {\n        <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n      }\n    </span>\n    @if (labelText) {\n      <span\n        class=\"sky-switch-label sky-radio-label-text\"\n        [class.sky-screen-reader-only]=\"labelHidden\"\n        >{{ labelText }}</span\n      >\n    } @else {\n      <ng-content select=\"sky-radio-label\" />\n    }\n  </label>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-radio-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div class=\"sky-font-deemphasized sky-radio-hint-text\">\n      {{ hintText }}\n    </div>\n  }\n</div>\n", styles: [":host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}:host-context(.sky-theme-modern) .sky-switch{display:flex}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch{display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
@@ -3626,14 +3626,14 @@ class SkyRadioGroupComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4], name: "name", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], value: "value", tabIndex: "tabIndex", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], hintText: "hintText", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
             SkyRadioGroupIdService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0, template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"isRequired ? true : null\"\n  [attr.required]=\"isRequired ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    @if (headingText) {\n      <legend\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-screen-reader-only': headingHidden,\n          'sky-margin-stacked-sm': !hintText,\n          'sky-control-label-required': isRequired,\n          'sky-margin-inline-xs': helpPopoverContent\n        }\"\n      >\n        @if (headingLevel === 3) {\n          <h3 [class]=\"headingClass\">\n            {{ headingText }}\n          </h3>\n        } @else if (headingLevel === 4) {\n          <h4 [class]=\"headingClass\">\n            {{ headingText }}\n          </h4>\n        } @else if (headingLevel === 5) {\n          <h5 [class]=\"headingClass\">\n            {{ headingText }}\n          </h5>\n        } @else {\n          <span [class]=\"headingClass\">\n            {{ headingText }}\n          </span>\n        }\n      </legend>\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"headingText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    }\n  </span>\n\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-radio-group-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"headingText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
+        ], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0, template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"isRequired ? true : null\"\n  [attr.required]=\"isRequired ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    @if (headingText) {\n      <legend\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-screen-reader-only': headingHidden,\n          'sky-margin-stacked-sm': !hintText,\n          'sky-control-label-required': isRequired,\n          'sky-margin-inline-xs': helpPopoverContent\n        }\"\n      >\n        @if (headingLevel === 3) {\n          <h3 [class]=\"headingClass\">\n            {{ headingText }}\n          </h3>\n        } @else if (headingLevel === 4) {\n          <h4 [class]=\"headingClass\">\n            {{ headingText }}\n          </h4>\n        } @else if (headingLevel === 5) {\n          <h5 [class]=\"headingClass\">\n            {{ headingText }}\n          </h5>\n        } @else {\n          <span [class]=\"'sky-radio-group-heading-text ' + headingClass\">\n            {{ headingText }}\n          </span>\n        }\n      </legend>\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"headingText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    }\n  </span>\n\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-radio-group-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"headingText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}legend h3,legend h4,legend h5{margin:0;display:inline-block}legend span{line-height:1.1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-radio-group', providers: [
                         SkyRadioGroupIdService,
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"isRequired ? true : null\"\n  [attr.required]=\"isRequired ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    @if (headingText) {\n      <legend\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-screen-reader-only': headingHidden,\n          'sky-margin-stacked-sm': !hintText,\n          'sky-control-label-required': isRequired,\n          'sky-margin-inline-xs': helpPopoverContent\n        }\"\n      >\n        @if (headingLevel === 3) {\n          <h3 [class]=\"headingClass\">\n            {{ headingText }}\n          </h3>\n        } @else if (headingLevel === 4) {\n          <h4 [class]=\"headingClass\">\n            {{ headingText }}\n          </h4>\n        } @else if (headingLevel === 5) {\n          <h5 [class]=\"headingClass\">\n            {{ headingText }}\n          </h5>\n        } @else {\n          <span [class]=\"headingClass\">\n            {{ headingText }}\n          </span>\n        }\n      </legend>\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"headingText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    }\n  </span>\n\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-radio-group-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"headingText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"] }]
+                    ], template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"isRequired ? true : null\"\n  [attr.required]=\"isRequired ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    @if (headingText) {\n      <legend\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-screen-reader-only': headingHidden,\n          'sky-margin-stacked-sm': !hintText,\n          'sky-control-label-required': isRequired,\n          'sky-margin-inline-xs': helpPopoverContent\n        }\"\n      >\n        @if (headingLevel === 3) {\n          <h3 [class]=\"headingClass\">\n            {{ headingText }}\n          </h3>\n        } @else if (headingLevel === 4) {\n          <h4 [class]=\"headingClass\">\n            {{ headingText }}\n          </h4>\n        } @else if (headingLevel === 5) {\n          <h5 [class]=\"headingClass\">\n            {{ headingText }}\n          </h5>\n        } @else {\n          <span [class]=\"'sky-radio-group-heading-text ' + headingClass\">\n            {{ headingText }}\n          </span>\n        }\n      </legend>\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"headingText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    }\n  </span>\n\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-radio-group-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"headingText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}legend h3,legend h4,legend h5{margin:0;display:inline-block}legend span{line-height:1.1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyRadioGroupIdService }, { type: i2.NgControl, decorators: [{
                     type: Self
                 }, {