@skyux/forms 10.8.0 → 10.9.0

package/index.d.ts

@@ -26,6 +26,7 @@ export { SkySelectionBoxGridAlignItemsType } from './lib/modules/selection-box/t
 export { SkyToggleSwitchModule } from './lib/modules/toggle-switch/toggle-switch.module';
 export { SkyToggleSwitchChange } from './lib/modules/toggle-switch/types/toggle-switch-change';
 export { SKY_FORM_ERRORS_ENABLED } from './lib/modules/form-error/form-errors-enabled-token';
+export { SkyFormFieldLabelTextRequiredService } from './lib/modules/shared/form-field-label-text-required.service';
 export { SkyCharacterCounterIndicatorComponent as λ1 } from './lib/modules/character-counter/character-counter-indicator.component';
 export { SkyCharacterCounterInputDirective as λ2 } from './lib/modules/character-counter/character-counter.directive';
 export { SkyCharacterCounterScreenReaderPipe as λ23 } from './lib/modules/character-counter/character-counter-screen-reader.pipe';

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

@@ -29,6 +29,12 @@ export declare class SkyCheckboxGroupComponent {
      * @preview
      */
     labelHidden: boolean;
+    /**
+     * [Persistent inline help text](https://developer.blackbaud.com/skyux/design/guidelines/user-assistance#inline-help) that provides
+     * additional context to the user.
+     * @preview
+     */
+    hintText: string | undefined;
     /**
      * Whether the checkbox group is required.
      * @preview
@@ -49,7 +55,7 @@ export declare class SkyCheckboxGroupComponent {
     protected errorId: string;
     protected formErrorsDataId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyCheckboxGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyCheckboxGroupComponent, "sky-checkbox-group", never, { "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "labelText": { "alias": "labelText"; "required": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "required": { "alias": "required"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": true; }; }, {}, never, ["sky-checkbox[icon]", "sky-checkbox", "sky-form-error"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyCheckboxGroupComponent, "sky-checkbox-group", never, { "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "labelText": { "alias": "labelText"; "required": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "required": { "alias": "required"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": true; }; }, {}, never, ["sky-checkbox[icon]", "sky-checkbox", "sky-form-error"], true, never>;
     static ngAcceptInputType_labelHidden: unknown;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_stacked: unknown;

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

@@ -142,6 +142,7 @@ export declare class SkyCheckboxComponent implements ControlValueAccessor, OnIni
     get indeterminateChange(): Observable<boolean>;
     set inputEl(el: ElementRef | undefined);
     get inputEl(): ElementRef | undefined;
+    display: string | undefined;
     protected inputId: string;
     protected readonly ngControl: NgControl | null;
     protected readonly errorId: string;

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

@@ -1,3 +1,4 @@
+import { TemplateRef } from '@angular/core';
 import { SkyFieldGroupHeadingLevel } from './field-group-heading-level';
 import { SkyFieldGroupHeadingStyle } from './field-group-heading-style';
 import * as i0 from "@angular/core";
@@ -37,9 +38,22 @@ export declare class SkyFieldGroupComponent {
      * @preview
      */
     set headingStyle(value: SkyFieldGroupHeadingStyle);
+    /**
+     * 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 the field group label. 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;
     protected headingClass: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyFieldGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyFieldGroupComponent, "sky-field-group", never, { "labelText": { "alias": "labelText"; "required": true; }; "hintText": { "alias": "hintText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "headingLevel": { "alias": "headingLevel"; "required": false; }; "headingStyle": { "alias": "headingStyle"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyFieldGroupComponent, "sky-field-group", never, { "labelText": { "alias": "labelText"; "required": true; }; "hintText": { "alias": "hintText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "headingLevel": { "alias": "headingLevel"; "required": false; }; "headingStyle": { "alias": "headingStyle"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_labelHidden: unknown;
     static ngAcceptInputType_stacked: unknown;
     static ngAcceptInputType_headingLevel: unknown;

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

@@ -96,6 +96,7 @@ export declare class SkyFileAttachmentComponent implements AfterViewInit, AfterC
      * For more information about the `aria-required` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-required).
      */
     required: boolean | undefined;
+    display: string | undefined;
     set value(value: SkyFileItem | undefined | null);
     get value(): SkyFileItem | undefined;
     currentThemeName: string | undefined;

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

@@ -1,4 +1,4 @@
-import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { SkyFileItem } from './file-item';
 import { SkyFileLink } from './file-link';
 import { SkyFileValidateFn } from './file-validate-function';
@@ -14,7 +14,7 @@ import * as i0 from "@angular/core";
  * outside of the file drop component, you can place the `sky-file-drop-target` CSS class
  * on the element that receives drop events to exempt it from the drop exclusion rule.
  */
-export declare class SkyFileDropComponent implements OnDestroy {
+export declare class SkyFileDropComponent implements OnInit, OnDestroy {
     #private;
     /**
      * Fires when users add or remove files.
@@ -104,11 +104,13 @@ export declare class SkyFileDropComponent implements OnDestroy {
      */
     required: boolean;
     inputEl: ElementRef | undefined;
+    display: string | undefined;
     rejectedOver: boolean;
     acceptedOver: boolean;
     linkUrl: string | undefined;
     protected errorId: string;
     protected rejectedFiles: SkyFileItem[];
+    ngOnInit(): void;
     ngOnDestroy(): void;
     dropClicked(): void;
     fileChangeEvent(fileChangeEvent: Event): void;

package/lib/modules/input-box/input-box.component.d.ts

@@ -75,6 +75,7 @@ export declare class SkyInputBoxComponent implements OnInit, AfterContentChecked
     readonly hintTextId: string;
     readonly ariaDescribedBy: ReplaySubject<string | undefined>;
     cssClass: string;
+    display: string | undefined;
     formControl: FormControlDirective | undefined;
     formControlByName: FormControlName | undefined;
     ngModel: NgModel | undefined;

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

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { SkyRadioGroupIdService } from './radio-group-id.service';
 import { SkyRadioComponent } from './radio.component';
@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
  * On Angular forms, the component manages the selected values and keeps the forms up-to-date.
  * When users select a radio button, its value is driven through an `ngModel` attribute that you specify on the `sky-radio-group` element.
  */
-export declare class SkyRadioGroupComponent implements AfterContentInit, AfterViewInit, OnDestroy {
+export declare class SkyRadioGroupComponent implements AfterContentInit, AfterViewInit, OnInit, OnDestroy {
     #private;
     /**
      * The HTML element ID of the element that labels
@@ -80,6 +80,13 @@ export declare class SkyRadioGroupComponent implements AfterContentInit, AfterVi
      * @preview
      */
     labelHidden: boolean;
+    display: string | undefined;
+    /**
+     * [Persistent inline help text](https://developer.blackbaud.com/skyux/design/guidelines/user-assistance#inline-help) that provides
+     * additional context to the user.
+     * @preview
+     */
+    hintText: 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
@@ -95,6 +102,7 @@ export declare class SkyRadioGroupComponent implements AfterContentInit, AfterVi
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     watchForSelections(): void;
+    ngOnInit(): void;
     ngOnDestroy(): void;
     writeValue(value: unknown): void;
     /**
@@ -105,6 +113,6 @@ 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; }; }, {}, ["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; }; "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 ngAcceptInputType_labelHidden: unknown;
 }

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

@@ -1,4 +1,4 @@
-import { EventEmitter, OnDestroy } from '@angular/core';
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { SkyRadioChange } from './types/radio-change';
@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
  * with `type="radio"`. When users select a radio button, its value is driven through an
  * `ngModel` attribute that you specify on the `sky-radio` element or the parent `sky-radio-group` element.
  */
-export declare class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
+export declare class SkyRadioComponent implements OnInit, OnDestroy, ControlValueAccessor {
     #private;
     /**
      * Fires when users focus off a radio button.
@@ -123,11 +123,13 @@ export declare class SkyRadioComponent implements OnDestroy, ControlValueAccesso
      * Fires when the selected value changes.
      */
     disabledChange: EventEmitter<boolean>;
+    display: string | undefined;
     set selectedValue(value: any);
     get selectedValue(): any;
     radioGroupDisabled: boolean;
     protected inputId: string;
     constructor();
+    ngOnInit(): void;
     ngOnDestroy(): void;
     writeValue(value: unknown): void;
     /**

package/lib/modules/shared/form-field-label-text-required.service.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+/**
+ * Requires child form field components of field groups to use label text.
+ * @internal
+ */
+export declare class SkyFormFieldLabelTextRequiredService {
+    validateLabelText(text: string | undefined): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyFormFieldLabelTextRequiredService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkyFormFieldLabelTextRequiredService>;
+}

package/lib/modules/toggle-switch/toggle-switch.component.d.ts

@@ -1,10 +1,10 @@
-import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
 import { SkyIdService } from '@skyux/core';
 import { SkyToggleSwitchLabelComponent } from './toggle-switch-label.component';
 import { SkyToggleSwitchChange } from './types/toggle-switch-change';
 import * as i0 from "@angular/core";
-export declare class SkyToggleSwitchComponent implements AfterContentInit, OnDestroy, ControlValueAccessor, Validator {
+export declare class SkyToggleSwitchComponent implements AfterContentInit, OnInit, OnDestroy, ControlValueAccessor, Validator {
     #private;
     /**
      * The ARIA label for the toggle switch. This sets the `aria-label`
@@ -50,8 +50,10 @@ export declare class SkyToggleSwitchComponent implements AfterContentInit, OnDes
     labelId: string;
     enableIndicatorAnimation: boolean;
     labelComponents: QueryList<SkyToggleSwitchLabelComponent> | undefined;
+    display: string | undefined;
     constructor(changeDetector: ChangeDetectorRef, idService: SkyIdService);
     ngAfterContentInit(): void;
+    ngOnInit(): void;
     ngOnDestroy(): void;
     writeValue(value: boolean): void;
     validate(control: AbstractControl): ValidationErrors | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/forms",
-  "version": "10.8.0",
+  "version": "10.9.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.8.0",
-    "@skyux/core": "10.8.0",
-    "@skyux/help-inline": "10.8.0",
-    "@skyux/i18n": "10.8.0",
-    "@skyux/indicators": "10.8.0",
-    "@skyux/popovers": "10.8.0",
-    "@skyux/theme": "10.8.0"
+    "@skyux-sdk/testing": "10.9.0",
+    "@skyux/core": "10.9.0",
+    "@skyux/help-inline": "10.9.0",
+    "@skyux/i18n": "10.9.0",
+    "@skyux/indicators": "10.9.0",
+    "@skyux/popovers": "10.9.0",
+    "@skyux/theme": "10.9.0"
   },
   "dependencies": {
     "tslib": "^2.6.2"