@skyux/forms 10.10.0 → 10.12.0

package/index.d.ts

@@ -20,6 +20,7 @@ export { SkyInputBoxModule } from './lib/modules/input-box/input-box.module';
 export { SkyRadioModule } from './lib/modules/radio/radio.module';
 export { SkyRadioChange } from './lib/modules/radio/types/radio-change';
 export { SkyRadioType } from './lib/modules/radio/types/radio-type';
+export { SkyRequiredStateDirective } from './lib/modules/required-state/required-state.directive';
 export { SkySelectionBoxModule } from './lib/modules/selection-box/selection-box.module';
 export { SkySelectionBoxGridAlignItems } from './lib/modules/selection-box/types/selection-box-grid-align-items';
 export { SkySelectionBoxGridAlignItemsType } from './lib/modules/selection-box/types/selection-box-grid-align-items-type';

package/lib/modules/checkbox/checkbox-group.component.d.ts

@@ -45,8 +45,7 @@ export declare class SkyCheckboxGroupComponent {
      * vertical spacing is automatically added to the checkbox group.
      * @preview
      */
-    set stacked(value: boolean);
-    get stacked(): boolean;
+    stacked: boolean;
     /**
      * The form group that contains the group of checkboxes.
      * @preview

package/lib/modules/checkbox/checkbox.component.d.ts

@@ -127,6 +127,13 @@ export declare class SkyCheckboxComponent implements ControlValueAccessor, OnIni
      * @preview
      */
     hintText: string | undefined;
+    /**
+     * Whether the checkbox is stacked on another form component. When specified, the appropriate
+     * vertical spacing is automatically added to the checkbox. If the checkbox is within a checkbox group,
+     * set `stacked` on the checkbox group component instead.
+     * @preview
+     */
+    stacked: boolean;
     /**
      * Fires when users select or deselect the checkbox.
      */
@@ -173,6 +180,7 @@ export declare class SkyCheckboxComponent implements ControlValueAccessor, OnIni
     /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
     onTouched: () => any;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyCheckboxComponent, "sky-checkbox", never, { "label": { "alias": "label"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "name": { "alias": "name"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "checkboxType": { "alias": "checkboxType"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; }, { "change": "change"; "checkedChange": "checkedChange"; "disabledChange": "disabledChange"; "indeterminateChange": "indeterminateChange"; }, never, ["sky-checkbox-label", "sky-form-error"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyCheckboxComponent, "sky-checkbox", never, { "label": { "alias": "label"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "name": { "alias": "name"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "checkboxType": { "alias": "checkboxType"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; }, { "change": "change"; "checkedChange": "checkedChange"; "disabledChange": "disabledChange"; "indeterminateChange": "indeterminateChange"; }, never, ["sky-checkbox-label", "sky-form-error"], false, never>;
     static ngAcceptInputType_labelHidden: unknown;
+    static ngAcceptInputType_stacked: unknown;
 }

package/lib/modules/file-attachment/file-attachment.component.d.ts

@@ -69,6 +69,12 @@ export declare class SkyFileAttachmentComponent implements AfterViewInit, AfterC
      */
     set minFileSize(value: number | undefined);
     get minFileSize(): number;
+    /**
+     * Whether the single file attachment is stacked on another form component. When specified,
+     * the appropriate vertical spacing is automatically added to the single file attachment.
+     * @preview
+     */
+    stacked: boolean;
     /**
      * The custom validation function. This validation runs alongside the internal
      * file validation. This function takes a `SkyFileItem` object as a parameter.
@@ -134,6 +140,7 @@ export declare class SkyFileAttachmentComponent implements AfterViewInit, AfterC
     setDisabledState(isDisabled: boolean): void;
     emitClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyFileAttachmentComponent, [null, null, null, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyFileAttachmentComponent, "sky-file-attachment", never, { "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "minFileSize": { "alias": "minFileSize"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "fileChange": "fileChange"; "fileClick": "fileClick"; }, ["labelComponents"], ["sky-form-error", "sky-file-attachment-label"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyFileAttachmentComponent, "sky-file-attachment", never, { "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "minFileSize": { "alias": "minFileSize"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "fileChange": "fileChange"; "fileClick": "fileClick"; }, ["labelComponents"], ["sky-form-error", "sky-file-attachment-label"], false, never>;
     static ngAcceptInputType_labelHidden: unknown;
+    static ngAcceptInputType_stacked: unknown;
 }

package/lib/modules/file-attachment/file-drop.component.d.ts

@@ -116,6 +116,12 @@ export declare class SkyFileDropComponent implements OnInit, OnDestroy {
      * @preview
      */
     helpPopoverTitle: string | undefined;
+    /**
+     * Whether the file attachment is stacked on another form component. When specified, the appropriate
+     * vertical spacing is automatically added to the file attachment.
+     * @preview
+     */
+    stacked: boolean;
     inputEl: ElementRef | undefined;
     display: string | undefined;
     rejectedOver: boolean;
@@ -135,7 +141,8 @@ export declare class SkyFileDropComponent implements OnInit, OnDestroy {
     addLink(event: Event): void;
     onLinkBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyFileDropComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyFileDropComponent, "sky-file-drop", never, { "fileUploadAriaLabel": { "alias": "fileUploadAriaLabel"; "required": false; }; "linkUploadAriaLabel": { "alias": "linkUploadAriaLabel"; "required": false; }; "minFileSize": { "alias": "minFileSize"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "noClick": { "alias": "noClick"; "required": false; }; "allowLinks": { "alias": "allowLinks"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "required": { "alias": "required"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; }, { "filesChanged": "filesChanged"; "linkInputBlur": "linkInputBlur"; "linkChanged": "linkChanged"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyFileDropComponent, "sky-file-drop", never, { "fileUploadAriaLabel": { "alias": "fileUploadAriaLabel"; "required": false; }; "linkUploadAriaLabel": { "alias": "linkUploadAriaLabel"; "required": false; }; "minFileSize": { "alias": "minFileSize"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "noClick": { "alias": "noClick"; "required": false; }; "allowLinks": { "alias": "allowLinks"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "required": { "alias": "required"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; }, { "filesChanged": "filesChanged"; "linkInputBlur": "linkInputBlur"; "linkChanged": "linkChanged"; }, never, ["*"], false, never>;
     static ngAcceptInputType_labelHidden: unknown;
     static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_stacked: unknown;
 }

package/lib/modules/radio/radio-group.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { SkyRadioGroupIdService } from './radio-group-id.service';
 import { SkyRadioComponent } from './radio.component';
@@ -55,6 +55,12 @@ export declare class SkyRadioGroupComponent implements AfterContentInit, AfterVi
      * @default false
      */
     required: boolean | undefined;
+    /**
+     * 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
+     */
+    stacked: boolean;
     /**
      * 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
@@ -87,6 +93,19 @@ export declare class SkyRadioGroupComponent implements AfterContentInit, AfterVi
      * @preview
      */
     hintText: string | undefined;
+    /**
+     * The content of the help popover. When specified along with `labelText`, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)
+     * button is added to radio group. The help inline button displays a [popover](https://developer.blackbaud.com/skyux/components/popover)
+     * when clicked using the specified content and optional title.
+     * @preview
+     */
+    helpPopoverContent: string | TemplateRef<unknown> | undefined;
+    /**
+     * The title of the help popover. This property only applies when `helpPopoverContent` is
+     * also specified.
+     * @preview
+     */
+    helpPopoverTitle: string | undefined;
     /**
      * Our radio components are usually implemented using an unordered list. This is an
      * accessibility violation because the unordered list has an implicit role which
@@ -113,6 +132,7 @@ export declare class SkyRadioGroupComponent implements AfterContentInit, AfterVi
     registerOnChange(fn: (value: any) => void): void;
     registerOnTouched(fn: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyRadioGroupComponent, [null, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioGroupComponent, "sky-radio-group", never, { "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; }, {}, ["radios"], ["*", "sky-form-error"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioGroupComponent, "sky-radio-group", never, { "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; }, {}, ["radios"], ["*", "sky-form-error"], false, never>;
+    static ngAcceptInputType_stacked: unknown;
     static ngAcceptInputType_labelHidden: unknown;
 }

package/lib/modules/radio/radio.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { SkyRadioChange } from './types/radio-change';
@@ -78,6 +78,19 @@ export declare class SkyRadioComponent implements OnInit, OnDestroy, ControlValu
      */
     set value(value: any);
     get value(): any;
+    /**
+     * The content of the help popover. When specified along with `labelText`, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)
+     * button is added to radio button. The help inline button displays a [popover](https://developer.blackbaud.com/skyux/components/popover)
+     * when clicked using the specified content and optional title.
+     * @preview
+     */
+    helpPopoverContent: string | TemplateRef<unknown> | undefined;
+    /**
+     * The title of the help popover. This property only applies when `helpPopoverContent` is
+     * also specified.
+     * @preview
+     */
+    helpPopoverTitle: string | undefined;
     /**
      * The icon to display in place of the radio button. To group radio buttons like in
      * the demo above, place the `sky-switch-icon-group` class on the direct parent element of the
@@ -143,6 +156,6 @@ export declare class SkyRadioComponent implements OnInit, OnDestroy, ControlValu
     onInputChange(event: Event): void;
     onInputFocusChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyRadioComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioComponent, "sky-radio", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "name": { "alias": "name"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "radioType": { "alias": "radioType"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; }, { "change": "change"; "checkedChange": "checkedChange"; "disabledChange": "disabledChange"; }, never, ["sky-radio-label"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioComponent, "sky-radio", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "name": { "alias": "name"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "radioType": { "alias": "radioType"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; }, { "change": "change"; "checkedChange": "checkedChange"; "disabledChange": "disabledChange"; }, never, ["sky-radio-label"], false, never>;
     static ngAcceptInputType_labelHidden: unknown;
 }

package/lib/modules/radio/radio.module.d.ts

@@ -6,11 +6,12 @@ import * as i4 from "@angular/common";
 import * as i5 from "@angular/forms";
 import * as i6 from "../form-error/form-error.module";
 import * as i7 from "../form-error/form-errors.module";
-import * as i8 from "@skyux/indicators";
-import * as i9 from "@skyux/core";
-import * as i10 from "../shared/sky-forms-resources.module";
+import * as i8 from "@skyux/help-inline";
+import * as i9 from "@skyux/indicators";
+import * as i10 from "@skyux/core";
+import * as i11 from "../shared/sky-forms-resources.module";
 export declare class SkyRadioModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyRadioModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyRadioModule, [typeof i1.SkyRadioComponent, typeof i2.SkyRadioGroupComponent, typeof i3.SkyRadioLabelComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.SkyFormErrorModule, typeof i7.SkyFormErrorsModule, typeof i8.SkyIconModule, typeof i9.SkyIdModule, typeof i10.SkyFormsResourcesModule, typeof i9.SkyTrimModule], [typeof i6.SkyFormErrorModule, typeof i1.SkyRadioComponent, typeof i2.SkyRadioGroupComponent, typeof i3.SkyRadioLabelComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyRadioModule, [typeof i1.SkyRadioComponent, typeof i2.SkyRadioGroupComponent, typeof i3.SkyRadioLabelComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.SkyFormErrorModule, typeof i7.SkyFormErrorsModule, typeof i8.SkyHelpInlineModule, typeof i9.SkyIconModule, typeof i10.SkyIdModule, typeof i11.SkyFormsResourcesModule, typeof i10.SkyTrimModule], [typeof i6.SkyFormErrorModule, typeof i1.SkyRadioComponent, typeof i2.SkyRadioGroupComponent, typeof i3.SkyRadioLabelComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SkyRadioModule>;
 }

package/lib/modules/required-state/required-state.directive.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * A host directive used to capture the "required" state of the host's form control.
+ * @internal
+ */
+export declare class SkyRequiredStateDirective {
+    #private;
+    required: boolean;
+    /**
+     * Whether the `required` attribute is set to `true`, or the control includes
+     * the `Validators.required` validator.
+     */
+    isRequired(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyRequiredStateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SkyRequiredStateDirective, never, never, { "required": { "alias": "required"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_required: unknown;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/forms",
-  "version": "10.10.0",
+  "version": "10.12.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -41,13 +41,13 @@
     "@angular/core": "^17.3.4",
     "@angular/forms": "^17.3.4",
     "@angular/platform-browser": "^17.3.4",
-    "@skyux-sdk/testing": "10.10.0",
-    "@skyux/core": "10.10.0",
-    "@skyux/help-inline": "10.10.0",
-    "@skyux/i18n": "10.10.0",
-    "@skyux/indicators": "10.10.0",
-    "@skyux/popovers": "10.10.0",
-    "@skyux/theme": "10.10.0"
+    "@skyux-sdk/testing": "10.12.0",
+    "@skyux/core": "10.12.0",
+    "@skyux/help-inline": "10.12.0",
+    "@skyux/i18n": "10.12.0",
+    "@skyux/indicators": "10.12.0",
+    "@skyux/popovers": "10.12.0",
+    "@skyux/theme": "10.12.0"
   },
   "dependencies": {
     "tslib": "^2.6.2"