@skyux/forms 10.21.1 → 10.23.0

package/fesm2022/skyux-forms.mjs

@@ -507,38 +507,58 @@ class SkyCheckboxGroupComponent {
          */
         this.headingHidden = false;
         /**
-         * The semantic heading level in the document structure.
+         * The heading [font style](https://developer.blackbaud.com/skyux/design/styles/typography#headings).
          * @preview
-         * @default 3
+         * @default 4
          */
-        this.headingLevel = 3;
+        this.headingStyle = 4;
         /**
          * Whether the checkbox group is required.
          * @preview
          */
         this.required = false;
-        /**
-         * Whether the checkbox group is stacked on another form component. When specified, the appropriate
-         * vertical spacing is automatically added to the checkbox group.
-         * @preview
-         */
-        this.stacked = false;
+        this.stackedLg = false;
+        this.stackedXL = false;
         this.#idSvc = inject(SkyIdService);
         this.errorId = this.#idSvc.generateId();
         this.formErrorsDataId = 'checkbox-group-form-errors';
-        this.headingClass = 'sky-font-heading-3';
+        this.#_stacked = false;
     }
     /**
-     * The heading [font style](https://developer.blackbaud.com/skyux/design/styles/typography#headings).
+     * The semantic heading level in the document structure. By default, the heading text is not wrapped in a heading element.
      * @preview
-     * @default 3
      */
-    set headingStyle(value) {
-        this.headingClass = `sky-font-heading-${value}`;
+    set headingLevel(value) {
+        this.#_headingLevel = value && !isNaN(value) ? value : undefined;
+        this.#updateStackedClasses();
+    }
+    get headingLevel() {
+        return this.#_headingLevel;
+    }
+    /**
+     * Whether the checkbox group is stacked on another form component. When specified, the appropriate
+     * vertical spacing is automatically added to the checkbox group.
+     * @preview
+     */
+    set stacked(value) {
+        this.#_stacked = value;
+        this.#updateStackedClasses();
+    }
+    get stacked() {
+        return this.#_stacked;
+    }
+    get headingClass() {
+        return `sky-font-heading-${this.headingStyle}`;
     }
     #idSvc;
+    #_headingLevel;
+    #_stacked;
+    #updateStackedClasses() {
+        this.stackedLg = !this.headingLevel && this.stacked;
+        this.stackedXL = !!this.headingLevel && this.stacked;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyCheckboxGroupComponent, isStandalone: true, selector: "sky-checkbox-group", inputs: { helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute], hintText: "hintText", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], formGroup: "formGroup", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], ngImport: i0, template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup.errors\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-errormessage]=\"\n    headingText && formGroup.errors ? errorId : undefined\n  \"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': headingHidden,\n      'sky-margin-stacked-xs': !!hintText,\n      'sky-margin-stacked-sm': !hintText\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n    >\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5> </span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_checkbox_group_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <div\n    skyId\n    [ngClass]=\"{\n      'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n        !!hintText\n    }\"\n    #hintTextEl=\"skyId\"\n  >\n    {{ hintText }}\n  </div>\n  <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n    <ng-content select=\"sky-checkbox[icon]\" />\n  </span>\n  <span class=\"sky-checkbox-group-stacked\">\n    <ng-content select=\"sky-checkbox\" />\n  </span>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && formGroup.errors\"\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup.errors\"\n  [labelText]=\"headingText\"\n  [showErrors]=\"formGroup.touched || formGroup.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "labelText", "popoverContent", "popoverTitle", "helpKey"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyCheckboxGroupComponent, isStandalone: true, selector: "sky-checkbox-group", inputs: { helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute], hintText: "hintText", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], formGroup: "formGroup", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], ngImport: i0, template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup.errors\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-errormessage]=\"\n    headingText && formGroup.errors ? errorId : undefined\n  \"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': headingHidden,\n      'sky-margin-stacked-xs': !!hintText,\n      'sky-margin-stacked-sm': !hintText\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"'sky-heading-text ' + headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5> </span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_checkbox_group_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <div\n    skyId\n    [ngClass]=\"{\n      'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n        !!hintText\n    }\"\n    #hintTextEl=\"skyId\"\n  >\n    {{ hintText }}\n  </div>\n  <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n    <ng-content select=\"sky-checkbox[icon]\" />\n  </span>\n  <span class=\"sky-checkbox-group-stacked\">\n    <ng-content select=\"sky-checkbox\" />\n  </span>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && formGroup.errors\"\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup.errors\"\n  [labelText]=\"headingText\"\n  [showErrors]=\"formGroup.touched || formGroup.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "labelText", "popoverContent", "popoverTitle", "helpKey"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
             type: Component,
@@ -548,7 +568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         SkyFormsResourcesModule,
                         SkyHelpInlineModule,
                         SkyIdModule,
-                    ], providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup.errors\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-errormessage]=\"\n    headingText && formGroup.errors ? errorId : undefined\n  \"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': headingHidden,\n      'sky-margin-stacked-xs': !!hintText,\n      'sky-margin-stacked-sm': !hintText\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n    >\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5> </span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_checkbox_group_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <div\n    skyId\n    [ngClass]=\"{\n      'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n        !!hintText\n    }\"\n    #hintTextEl=\"skyId\"\n  >\n    {{ hintText }}\n  </div>\n  <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n    <ng-content select=\"sky-checkbox[icon]\" />\n  </span>\n  <span class=\"sky-checkbox-group-stacked\">\n    <ng-content select=\"sky-checkbox\" />\n  </span>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && formGroup.errors\"\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup.errors\"\n  [labelText]=\"headingText\"\n  [showErrors]=\"formGroup.touched || formGroup.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"] }]
+                    ], providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup.errors\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-errormessage]=\"\n    headingText && formGroup.errors ? errorId : undefined\n  \"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': headingHidden,\n      'sky-margin-stacked-xs': !!hintText,\n      'sky-margin-stacked-sm': !hintText\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"'sky-heading-text ' + headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5> </span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_checkbox_group_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <div\n    skyId\n    [ngClass]=\"{\n      'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n        !!hintText\n    }\"\n    #hintTextEl=\"skyId\"\n  >\n    {{ hintText }}\n  </div>\n  <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n    <ng-content select=\"sky-checkbox[icon]\" />\n  </span>\n  <span class=\"sky-checkbox-group-stacked\">\n    <ng-content select=\"sky-checkbox\" />\n  </span>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && formGroup.errors\"\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup.errors\"\n  [labelText]=\"headingText\"\n  [showErrors]=\"formGroup.touched || formGroup.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"] }]
         }], propDecorators: { helpPopoverContent: [{
                 type: Input
             }], helpPopoverTitle: [{
@@ -573,14 +593,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             }], stacked: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.sky-margin-stacked-lg']
             }], formGroup: [{
                 type: Input,
                 args: [{ required: true }]
             }], helpKey: [{
                 type: Input
+            }], stackedLg: [{
+                type: HostBinding,
+                args: ['class.sky-margin-stacked-lg']
+            }], stackedXL: [{
+                type: HostBinding,
+                args: ['class.sky-margin-stacked-xl']
             }] } });
 
 /**
@@ -3331,12 +3354,15 @@ class SkyRadioGroupComponent {
         return this.#_disabled;
     }
     /**
-     * The heading [font style](https://developer.blackbaud.com/skyux/design/styles/typography#headings).
+     * The semantic heading level in the document structure. By default, the heading text is not wrapped in a heading element.
      * @preview
-     * @default 3
      */
-    set headingStyle(value) {
-        this.headingClass = `sky-font-heading-${value}`;
+    set headingLevel(value) {
+        this.#_headingLevel = value && !isNaN(value) ? value : undefined;
+        this.#updateStackedClasses();
+    }
+    get headingLevel() {
+        return this.#_headingLevel;
     }
     /**
      * The name for the collection of radio buttons that the component groups together.
@@ -3356,6 +3382,18 @@ class SkyRadioGroupComponent {
     get name() {
         return this.#_name;
     }
+    /**
+     * Whether the radio button group is stacked on another form component. When specified,
+     * the appropriate vertical spacing is automatically added to the radio button group.
+     * @preview
+     */
+    set stacked(value) {
+        this.#_stacked = value;
+        this.#updateStackedClasses();
+    }
+    get stacked() {
+        return this.#_stacked;
+    }
     /**
      * The value of the radio button to select by default when the group loads.
      * The value corresponds to the `value` property of an individual `sky-radio` element within the
@@ -3387,6 +3425,9 @@ class SkyRadioGroupComponent {
     get tabIndex() {
         return this.#_tabIndex;
     }
+    get headingClass() {
+        return `sky-font-heading-${this.headingStyle}`;
+    }
     #controlValue;
     #defaultName;
     #ngUnsubscribe;
@@ -3395,6 +3436,8 @@ class SkyRadioGroupComponent {
     #_tabIndex;
     #_ariaLabel;
     #_ariaLabelledBy;
+    #_headingLevel;
+    #_stacked;
     #changeDetector;
     #radioGroupIdSvc;
     #logger;
@@ -3402,11 +3445,11 @@ class SkyRadioGroupComponent {
     #headingTextRequired;
     constructor(changeDetector, radioGroupIdSvc, ngControl) {
         /**
-         * The semantic heading level in the document structure.
+         * The heading [font style](https://developer.blackbaud.com/skyux/design/styles/typography#headings).
          * @preview
-         * @default 3
+         * @default 4
          */
-        this.headingLevel = 3;
+        this.headingStyle = 4;
         /**
          * Whether the input is required for form validation.
          * When you set this property to `true`, the component adds `aria-required` and `required`
@@ -3416,28 +3459,24 @@ class SkyRadioGroupComponent {
          * @default false
          */
         this.required = false;
-        /**
-         * Whether the radio button group is stacked on another form component. When specified,
-         * the appropriate vertical spacing is automatically added to the radio button group.
-         * @preview
-         */
-        this.stacked = false;
         /**
          * Indicates whether to hide the `headingText`.
          * @preview
          */
         this.headingHidden = false;
+        this.stackedLg = false;
+        this.stackedXL = false;
         this.#defaultName = `sky-radio-group-${nextUniqueId++}`;
         this.#ngUnsubscribe = new Subject();
         this.#_disabled = false;
         this.#_name = '';
+        this.#_stacked = false;
         this.#logger = inject(SkyLogService);
         this.#idService = inject(SkyIdService);
         this.#headingTextRequired = inject(SkyFormFieldLabelTextRequiredService, {
             optional: true,
         });
         this.errorId = this.#idService.generateId();
-        this.headingClass = 'sky-font-heading-3';
         /* istanbul ignore next */
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.#onChange = () => { };
@@ -3572,18 +3611,22 @@ class SkyRadioGroupComponent {
         this.#updateRadioButtonTabIndexes();
         this.#updateRadioButtonDisabled();
     }
+    #updateStackedClasses() {
+        this.stackedLg = !this.headingLevel && this.stacked;
+        this.stackedXL = !!this.headingLevel && this.stacked;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRadioGroupIdService }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: "disabled", headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute], name: "name", required: "required", 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.stacked", "style.display": "this.display" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: "disabled", headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute], name: "name", required: "required", stacked: ["stacked", "stacked", booleanAttribute], value: "value", tabIndex: "tabIndex", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], hintText: "hintText", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "style.display": "this.display", "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]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : 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    <legend\n      *ngIf=\"headingText\"\n      class=\"sky-control-label\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-stacked-sm': !hintText,\n        'sky-control-label-required': required,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_radio_group_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "labelText", "popoverContent", "popoverTitle", "helpKey"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+        ], 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]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : 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    <legend\n      *ngIf=\"headingText\"\n      class=\"sky-control-label\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-stacked-sm': !hintText,\n        'sky-control-label-required': required,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_radio_group_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "labelText", "popoverContent", "popoverTitle", "helpKey"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", 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]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : 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    <legend\n      *ngIf=\"headingText\"\n      class=\"sky-control-label\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-stacked-sm': !hintText,\n        'sky-control-label-required': required,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_radio_group_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{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]=\"required ? true : null\"\n  [attr.required]=\"required ? '' : 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    <legend\n      *ngIf=\"headingText\"\n      class=\"sky-control-label\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-stacked-sm': !hintText,\n        'sky-control-label-required': required,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_radio_group_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || 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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyRadioGroupIdService }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -3607,9 +3650,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             }], stacked: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.sky-margin-stacked-lg']
             }], value: [{
                 type: Input
             }], tabIndex: [{
@@ -3619,9 +3659,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             }], headingHidden: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
             }], hintText: [{
                 type: Input
             }], helpPopoverContent: [{
@@ -3633,6 +3670,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             }], radios: [{
                 type: ContentChildren,
                 args: [SkyRadioComponent, { descendants: true }]
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], stackedLg: [{
+                type: HostBinding,
+                args: ['class.sky-margin-stacked-lg']
+            }], stackedXL: [{
+                type: HostBinding,
+                args: ['class.sky-margin-stacked-xl']
             }] } });
 
 /**