@skyux/forms 10.2.0 → 10.4.0

package/index.d.ts

@@ -1,8 +1,9 @@
 export { SkyCharacterCounterModule } from './lib/modules/character-counter/character-counter.module';
 export { SkyCheckboxChange } from './lib/modules/checkbox/checkbox-change';
 export { SkyCheckboxModule } from './lib/modules/checkbox/checkbox.module';
-export { SkyFormErrorsModule } from './lib/modules/form-error/form-errors.module';
-export { SkyFormErrorModule } from './lib/modules/form-error/form-error.module';
+export { SkyFieldGroupModule } from './lib/modules/field-group/field-group.module';
+export { SkyFieldGroupHeadingLevel } from './lib/modules/field-group/field-group-heading-level';
+export { SkyFieldGroupHeadingStyle } from './lib/modules/field-group/field-group-heading-style';
 export { SkyFileAttachmentsModule } from './lib/modules/file-attachment/file-attachments.module';
 export { SkyFileItem } from './lib/modules/file-attachment/file-item';
 export { SkyFileItemErrorType } from './lib/modules/file-attachment/file-item-error-type';
@@ -11,6 +12,8 @@ export { SkyFileSizePipe } from './lib/modules/file-attachment/file-size.pipe';
 export { SkyFileAttachmentChange } from './lib/modules/file-attachment/types/file-attachment-change';
 export { SkyFileAttachmentClick } from './lib/modules/file-attachment/types/file-attachment-click';
 export { SkyFileDropChange } from './lib/modules/file-attachment/types/file-drop-change';
+export { SkyFormErrorsModule } from './lib/modules/form-error/form-errors.module';
+export { SkyFormErrorModule } from './lib/modules/form-error/form-error.module';
 export { SkyInputBoxHostService } from './lib/modules/input-box/input-box-host.service';
 export { SkyInputBoxPopulateArgs } from './lib/modules/input-box/input-box-populate-args';
 export { SkyInputBoxModule } from './lib/modules/input-box/input-box.module';
@@ -29,6 +32,7 @@ export { SkyCharacterCounterScreenReaderPipe as λ23 } from './lib/modules/chara
 export { SkyCheckboxLabelComponent as λ4 } from './lib/modules/checkbox/checkbox-label.component';
 export { SkyCheckboxComponent as λ3 } from './lib/modules/checkbox/checkbox.component';
 export { SkyCheckboxGroupComponent as λ24 } from './lib/modules/checkbox/checkbox-group.component';
+export { SkyFieldGroupComponent as λ25 } from './lib/modules/field-group/field-group.component';
 export { SkyFileAttachmentLabelComponent as λ6 } from './lib/modules/file-attachment/file-attachment-label.component';
 export { SkyFileAttachmentComponent as λ7 } from './lib/modules/file-attachment/file-attachment.component';
 export { SkyFileDropComponent as λ8 } from './lib/modules/file-attachment/file-drop.component';

package/lib/modules/field-group/field-group-heading-level.d.ts

@@ -0,0 +1 @@
+export type SkyFieldGroupHeadingLevel = 3 | 4;

package/lib/modules/field-group/field-group-heading-style.d.ts

@@ -0,0 +1 @@
+export type SkyFieldGroupHeadingStyle = 3 | 4;

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

@@ -0,0 +1,41 @@
+import { SkyFieldGroupHeadingLevel } from './field-group-heading-level';
+import { SkyFieldGroupHeadingStyle } from './field-group-heading-style';
+import * as i0 from "@angular/core";
+/**
+ * Organizes form fields into a group.
+ */
+export declare class SkyFieldGroupComponent {
+    /**
+     * The text to display as the field group's label.
+     * @preview
+     */
+    labelText: string;
+    /**
+     * Indicates whether to hide the `labelText`.
+     * @preview
+     */
+    labelHidden: boolean;
+    /**
+     * Whether the field group is stacked on another field group. When specified, the appropriate
+     * vertical spacing is automatically added to the field group.
+     * @preview
+     */
+    stacked: boolean;
+    /**
+     * The heading level in the document structure.
+     * @preview
+     */
+    headingLevel: SkyFieldGroupHeadingLevel;
+    /**
+     * The heading font style.
+     * @preview
+     */
+    set headingStyle(value: SkyFieldGroupHeadingStyle);
+    protected headingClass: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyFieldGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyFieldGroupComponent, "sky-field-group", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "headingLevel": { "alias": "headingLevel"; "required": false; }; "headingStyle": { "alias": "headingStyle"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_labelHidden: unknown;
+    static ngAcceptInputType_stacked: unknown;
+    static ngAcceptInputType_headingLevel: unknown;
+    static ngAcceptInputType_headingStyle: unknown;
+}

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

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./field-group.component";
+export declare class SkyFieldGroupModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyFieldGroupModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyFieldGroupModule, never, [typeof i1.SkyFieldGroupComponent], [typeof i1.SkyFieldGroupComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SkyFieldGroupModule>;
+}

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

@@ -88,6 +88,12 @@ export declare class SkyFileDropComponent implements OnDestroy {
      * @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;
     inputEl: ElementRef | undefined;
     rejectedOver: boolean;
     acceptedOver: boolean;
@@ -105,6 +111,6 @@ export declare class SkyFileDropComponent implements 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; }; }, { "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; }; }, { "filesChanged": "filesChanged"; "linkInputBlur": "linkInputBlur"; "linkChanged": "linkChanged"; }, never, ["*"], false, never>;
     static ngAcceptInputType_labelHidden: unknown;
 }

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

@@ -18,7 +18,10 @@ export declare class SkyInputBoxComponent implements OnInit, AfterContentChecked
     /**
      * Whether to visually highlight the input box as disabled. To disable the input box's
      * input element, use the HTML `disabled` attribute or the Angular `FormControl.disabled`
-     * property. You must set both properties to disable an input element and visually indicate
+     * property. If the input element is mapped to an Angular form control
+     * (e.g. `formControlName`, `ngModel`, etc.), "disabled" styles are applied automatically;
+     * if the input element is not associated with an Angular form control, the `disabled`
+     * property on the input box must be set to `true` to visually indicate
      * the disabled state on the input box.
      * @default false
      */
@@ -77,6 +80,7 @@ export declare class SkyInputBoxComponent implements OnInit, AfterContentChecked
     inputRef: ElementRef | undefined;
     protected controlDir: AbstractControlDirective | undefined;
     protected helpPopoverOpen: boolean | undefined;
+    protected get isDisabled(): boolean;
     protected get hasErrorsComputed(): boolean;
     protected get required(): boolean;
     protected characterCountScreenReader: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/forms",
-  "version": "10.2.0",
+  "version": "10.4.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -41,12 +41,12 @@
     "@angular/core": "^17.3.1",
     "@angular/forms": "^17.3.1",
     "@angular/platform-browser": "^17.3.1",
-    "@skyux-sdk/testing": "10.2.0",
-    "@skyux/core": "10.2.0",
-    "@skyux/i18n": "10.2.0",
-    "@skyux/indicators": "10.2.0",
-    "@skyux/popovers": "10.2.0",
-    "@skyux/theme": "10.2.0"
+    "@skyux-sdk/testing": "10.4.0",
+    "@skyux/core": "10.4.0",
+    "@skyux/i18n": "10.4.0",
+    "@skyux/indicators": "10.4.0",
+    "@skyux/popovers": "10.4.0",
+    "@skyux/theme": "10.4.0"
   },
   "dependencies": {
     "tslib": "^2.6.2"

package/esm2022/lib/modules/shared/forms-utility.mjs

@@ -1,26 +0,0 @@
-// Need to add the following to classes which contain static methods.
-// See: https://github.com/ng-packagr/ng-packagr/issues/641
-// @dynamic
-export class SkyFormsUtility {
-    /** Coerces a data-bound value (typically a string) to a boolean. */
-    static coerceBooleanProperty(value) {
-        return value !== undefined && `${value}` !== 'false';
-    }
-    /**
-     * Gets the required state of the checkbox.
-     * Currently, Angular doesn't offer a way to get this easily, so we have to create an empty
-     * control using the current validator to see if it throws a `required` validation error.
-     * https://github.com/angular/angular/issues/13461#issuecomment-340368046
-     */
-    static hasRequiredValidation(ngControl) {
-        const abstractControl = ngControl.control;
-        if (abstractControl && abstractControl.validator) {
-            const validator = abstractControl.validator({});
-            if (validator && validator['required']) {
-                return true;
-            }
-        }
-        return false;
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybXMtdXRpbGl0eS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9mb3Jtcy9zcmMvbGliL21vZHVsZXMvc2hhcmVkL2Zvcm1zLXV0aWxpdHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEscUVBQXFFO0FBQ3JFLDJEQUEyRDtBQUMzRCxXQUFXO0FBQ1gsTUFBTSxPQUFPLGVBQWU7SUFDMUIsb0VBQW9FO0lBQzdELE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQyxLQUFVO1FBQzVDLE9BQU8sS0FBSyxLQUFLLFNBQVMsSUFBSSxHQUFHLEtBQUssRUFBRSxLQUFLLE9BQU8sQ0FBQztJQUN2RCxDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSSxNQUFNLENBQUMscUJBQXFCLENBQUMsU0FBb0I7UUFDdEQsTUFBTSxlQUFlLEdBQUcsU0FBUyxDQUFDLE9BQTBCLENBQUM7UUFDN0QsSUFBSSxlQUFlLElBQUksZUFBZSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ2pELE1BQU0sU0FBUyxHQUFHLGVBQWUsQ0FBQyxTQUFTLENBQUMsRUFBcUIsQ0FBQyxDQUFDO1lBQ25FLElBQUksU0FBUyxJQUFJLFNBQVMsQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO2dCQUN2QyxPQUFPLElBQUksQ0FBQztZQUNkLENBQUM7UUFDSCxDQUFDO1FBQ0QsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIE5nQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuLy8gTmVlZCB0byBhZGQgdGhlIGZvbGxvd2luZyB0byBjbGFzc2VzIHdoaWNoIGNvbnRhaW4gc3RhdGljIG1ldGhvZHMuXG4vLyBTZWU6IGh0dHBzOi8vZ2l0aHViLmNvbS9uZy1wYWNrYWdyL25nLXBhY2thZ3IvaXNzdWVzLzY0MVxuLy8gQGR5bmFtaWNcbmV4cG9ydCBjbGFzcyBTa3lGb3Jtc1V0aWxpdHkge1xuICAvKiogQ29lcmNlcyBhIGRhdGEtYm91bmQgdmFsdWUgKHR5cGljYWxseSBhIHN0cmluZykgdG8gYSBib29sZWFuLiAqL1xuICBwdWJsaWMgc3RhdGljIGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZTogYW55KTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHZhbHVlICE9PSB1bmRlZmluZWQgJiYgYCR7dmFsdWV9YCAhPT0gJ2ZhbHNlJztcbiAgfVxuXG4gIC8qKlxuICAgKiBHZXRzIHRoZSByZXF1aXJlZCBzdGF0ZSBvZiB0aGUgY2hlY2tib3guXG4gICAqIEN1cnJlbnRseSwgQW5ndWxhciBkb2Vzbid0IG9mZmVyIGEgd2F5IHRvIGdldCB0aGlzIGVhc2lseSwgc28gd2UgaGF2ZSB0byBjcmVhdGUgYW4gZW1wdHlcbiAgICogY29udHJvbCB1c2luZyB0aGUgY3VycmVudCB2YWxpZGF0b3IgdG8gc2VlIGlmIGl0IHRocm93cyBhIGByZXF1aXJlZGAgdmFsaWRhdGlvbiBlcnJvci5cbiAgICogaHR0cHM6Ly9naXRodWIuY29tL2FuZ3VsYXIvYW5ndWxhci9pc3N1ZXMvMTM0NjEjaXNzdWVjb21tZW50LTM0MDM2ODA0NlxuICAgKi9cbiAgcHVibGljIHN0YXRpYyBoYXNSZXF1aXJlZFZhbGlkYXRpb24obmdDb250cm9sOiBOZ0NvbnRyb2wpOiBib29sZWFuIHtcbiAgICBjb25zdCBhYnN0cmFjdENvbnRyb2wgPSBuZ0NvbnRyb2wuY29udHJvbCBhcyBBYnN0cmFjdENvbnRyb2w7XG4gICAgaWYgKGFic3RyYWN0Q29udHJvbCAmJiBhYnN0cmFjdENvbnRyb2wudmFsaWRhdG9yKSB7XG4gICAgICBjb25zdCB2YWxpZGF0b3IgPSBhYnN0cmFjdENvbnRyb2wudmFsaWRhdG9yKHt9IGFzIEFic3RyYWN0Q29udHJvbCk7XG4gICAgICBpZiAodmFsaWRhdG9yICYmIHZhbGlkYXRvclsncmVxdWlyZWQnXSkge1xuICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICAgIH1cbiAgICB9XG4gICAgcmV0dXJuIGZhbHNlO1xuICB9XG59XG4iXX0=

package/lib/modules/shared/forms-utility.d.ts

@@ -1,12 +0,0 @@
-import { NgControl } from '@angular/forms';
-export declare class SkyFormsUtility {
-    /** Coerces a data-bound value (typically a string) to a boolean. */
-    static coerceBooleanProperty(value: any): boolean;
-    /**
-     * Gets the required state of the checkbox.
-     * Currently, Angular doesn't offer a way to get this easily, so we have to create an empty
-     * control using the current validator to see if it throws a `required` validation error.
-     * https://github.com/angular/angular/issues/13461#issuecomment-340368046
-     */
-    static hasRequiredValidation(ngControl: NgControl): boolean;
-}