@skyux/forms 15.0.0-alpha.9 → 15.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/forms",
-  "version": "15.0.0-alpha.9",
+  "version": "15.0.0-beta.1",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -21,13 +21,15 @@
     "@angular/core": "^22.1.2",
     "@angular/forms": "^22.1.2",
     "@angular/platform-browser": "^22.1.2",
-    "@skyux/core": "15.0.0-alpha.9",
-    "@skyux/help-inline": "15.0.0-alpha.9",
-    "@skyux/i18n": "15.0.0-alpha.9",
-    "@skyux/icon": "15.0.0-alpha.9",
-    "@skyux/indicators": "15.0.0-alpha.9",
-    "@skyux/popovers": "15.0.0-alpha.9",
-    "@skyux/theme": "15.0.0-alpha.9"
+    "@angular/router": "^22.1.2",
+    "@skyux/core": "15.0.0-beta.1",
+    "@skyux/help-inline": "15.0.0-beta.1",
+    "@skyux/i18n": "15.0.0-beta.1",
+    "@skyux/icon": "15.0.0-beta.1",
+    "@skyux/indicators": "15.0.0-beta.1",
+    "@skyux/popovers": "15.0.0-beta.1",
+    "@skyux/router": "15.0.0-beta.1",
+    "@skyux/theme": "15.0.0-beta.1"
   },
   "dependencies": {
     "tslib": "^2.8.1"

package/types/skyux-forms-testing.d.ts

@@ -3,7 +3,7 @@ import { SkyHarnessFilters, SkyComponentHarness, SkyQueryableComponentHarness }
 import { SkyStatusIndicatorHarness } from '@skyux/indicators/testing';
 import { SkyPopoverHarness } from '@skyux/popovers/testing';
 import { ComponentFixture } from '@angular/core/testing';
-import { SkyCheckboxGroupHeadingLevel, SkyCheckboxGroupHeadingStyle, SkyFieldGroupHeadingLevel, SkyFieldGroupHeadingStyle, SkyRadioGroupHeadingLevel, SkyRadioGroupHeadingStyle } from '@skyux/forms';
+import { SkyCheckboxGroupHeadingLevel, SkyCheckboxGroupHeadingStyle, SkyFieldGroupHeadingLevel, SkyFieldGroupHeadingStyle, SkyRadioGroupHeadingLevel, SkyRadioGroupHeadingStyle, SkyButtonStyle, SkyButtonType } from '@skyux/forms';
 import { Provider } from '@angular/core';
 import { SkyIconHarness } from '@skyux/icon/testing';
 
@@ -1178,5 +1178,82 @@ declare class SkyToggleSwitchHarness extends SkyComponentHarness {
     uncheck(): Promise<void>;
 }
 
-export { SkyCharacterCounterIndicatorHarness, SkyCheckboxFixture, SkyCheckboxGroupHarness, SkyCheckboxHarness, SkyCheckboxLabelHarness, SkyFieldGroupHarness, SkyFileAttachmentHarness, SkyFileDropHarness, SkyFileItemHarness, SkyFormErrorHarness, SkyFormErrorsHarness, SkyInputBoxHarness, SkyRadioFixture, SkyRadioGroupHarness, SkyRadioHarness, SkyRadioLabelHarness, SkySelectionBoxGridHarness, SkySelectionBoxHarness, SkyToggleSwitchHarness, provideSkyFileAttachmentTesting };
-export type { SkyCharacterCounterIndicatorHarnessFilters, SkyCheckboxGroupHarnessFilters, SkyCheckboxHarnessFilters, SkyFieldGroupHarnessFilters, SkyFileAttachmentHarnessFilters, SkyFileDropHarnessFilters, SkyFileItemHarnessFilters, SkyFormErrorHarnessFilters, SkyFormErrorsHarnessFilters, SkyInputBoxHarnessFilters, SkyRadioGroupHarnessFilters, SkyRadioHarnessFilters, SkySelectionBoxGridHarnessFilters, SkySelectionBoxHarnessFilters, SkyToggleSwitchHarnessFilters };
+/**
+ * A set of criteria that can be used to filter a list of `SkyButtonHarness` instances.
+ */
+interface SkyButtonHarnessFilters extends SkyHarnessFilters {
+}
+
+/**
+ * Harness for interacting with a button component in tests.
+ */
+declare class SkyButtonHarness extends SkyComponentHarness {
+    #private;
+    /**
+     * @internal
+     */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a
+     * `SkyButtonHarness` that meets certain criteria.
+     */
+    static with(filters: SkyButtonHarnessFilters): HarnessPredicate<SkyButtonHarness>;
+    /**
+     * Blurs the button.
+     */
+    blur(): Promise<void>;
+    /**
+     * Clicks the button.
+     */
+    click(): Promise<void>;
+    /**
+     * Focuses the button.
+     */
+    focus(): Promise<void>;
+    /**
+     * Gets the button's style.
+     */
+    getButtonStyle(): Promise<SkyButtonStyle>;
+    /**
+     * Gets the button's type.
+     */
+    getButtonType(): Promise<SkyButtonType | undefined>;
+    /**
+     * Gets the button's label text. If the label is set via `labelText` and `labelHidden` is true,
+     * the text will still be returned.
+     */
+    getLabelText(): Promise<string>;
+    /**
+     * Whether the label is hidden. Only supported when using the `labelText` input to set the label.
+     */
+    getLabelHidden(): Promise<boolean>;
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Whether the button is focused.
+     */
+    isFocused(): Promise<boolean>;
+    /**
+     * Gets the name of the displayed icon, or undefined if no icon is displayed.
+     */
+    getIconName(): Promise<string | undefined>;
+    /**
+     * Whether the button is a block button.
+     */
+    isBlock(): Promise<boolean>;
+    /**
+     * Whether the button is displaying a logo. This will return false when no icon
+     * is displayed, even when the logo input is set to true.
+     */
+    isLogo(): Promise<boolean>;
+    /**
+     * Gets the resolved URL for the current permalink, or undefined if no permalink
+     * is specified.
+     */
+    getLink(): Promise<string | undefined>;
+}
+
+export { SkyButtonHarness, SkyCharacterCounterIndicatorHarness, SkyCheckboxFixture, SkyCheckboxGroupHarness, SkyCheckboxHarness, SkyCheckboxLabelHarness, SkyFieldGroupHarness, SkyFileAttachmentHarness, SkyFileDropHarness, SkyFileItemHarness, SkyFormErrorHarness, SkyFormErrorsHarness, SkyInputBoxHarness, SkyRadioFixture, SkyRadioGroupHarness, SkyRadioHarness, SkyRadioLabelHarness, SkySelectionBoxGridHarness, SkySelectionBoxHarness, SkyToggleSwitchHarness, provideSkyFileAttachmentTesting };
+export type { SkyButtonHarnessFilters, SkyCharacterCounterIndicatorHarnessFilters, SkyCheckboxGroupHarnessFilters, SkyCheckboxHarnessFilters, SkyFieldGroupHarnessFilters, SkyFileAttachmentHarnessFilters, SkyFileDropHarnessFilters, SkyFileItemHarnessFilters, SkyFormErrorHarnessFilters, SkyFormErrorsHarnessFilters, SkyInputBoxHarnessFilters, SkyRadioGroupHarnessFilters, SkyRadioHarnessFilters, SkySelectionBoxGridHarnessFilters, SkySelectionBoxHarnessFilters, SkyToggleSwitchHarnessFilters };

package/types/skyux-forms.d.ts

@@ -10,6 +10,7 @@ import * as i10 from '@skyux/help-inline';
 import * as i11 from '@skyux/icon';
 import * as i12 from '@skyux/core';
 import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
+import { NavigationExtras } from '@angular/router';
 
 /**
  * @deprecated Use [input box](https://developer.blackbaud.com/skyux/components/input-box)
@@ -975,13 +976,13 @@ declare class SkyInputBoxComponent implements OnInit, AfterContentChecked, OnDes
      */
     labelText: string | undefined;
     /**
-     * The maximum number of characters to allow in the input box. This property places a
-     * [SKY UX character count](https://developer.blackbaud.com/skyux/components/character-count)
-     * on the input element with the appropriate validator, so don't use it with inputs where
-     * users are unlikely to exceed character limits. Instead, use
-     * [Angular's max length validator](https://angular.io/api/forms/MaxLengthValidator) and a
-     * `maxLength` attribute on the input element to handle maximum length validation.
-     *
+     * The character limit for the input box. If users exceed the limit, the input box's form control
+     * becomes invalid and the property adds [Validators.maxLength](https://angular.dev/api/forms/Validators).
+     * The validation error message and screen reader announcement use `labelText`. This property also
+     * displays a character count indicator in the top right with the number of characters that users enter,
+     * the character limit, and a danger icon if users exceed the limit. If users are unlikely to exceed a
+     * character limit, use `Validators.maxLength` directly instead with a `maxLength` attribute on the
+     * input element.
      */
     set characterLimit(value: NumberInput);
     get characterLimit(): number | undefined;
@@ -1543,7 +1544,6 @@ declare class SkySelectionBoxGridComponent implements OnDestroy, OnInit {
     get containerElementRef(): ElementRef | undefined;
     ngOnInit(): void;
     ngOnDestroy(): void;
-    onWindowResize(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkySelectionBoxGridComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SkySelectionBoxGridComponent, "sky-selection-box-grid", never, { "alignItems": { "alias": "alignItems"; "required": false; }; }, {}, ["selectionBoxes"], ["sky-selection-box"], false, never>;
 }
@@ -1676,5 +1676,97 @@ declare class SkyToggleSwitchModule {
  */
 declare const SKY_FORM_ERRORS_ENABLED: InjectionToken<boolean>;
 
-export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxGridAlignItems, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
-export type { SkyCheckboxChange, SkyCheckboxGroupHeadingLevel, SkyCheckboxGroupHeadingStyle, SkyFieldGroupHeadingLevel, SkyFieldGroupHeadingStyle, SkyFileAttachmentChange, SkyFileAttachmentClick, SkyFileDropChange, SkyFileItem, SkyFileItemErrorType, SkyFileLink, SkyFileValidateFn, SkyInputBoxPopulateArgs, SkyRadioChange, SkyRadioGroupHeadingLevel, SkyRadioGroupHeadingStyle, SkyRadioType, SkySelectionBoxGridAlignItemsType, SkyToggleSwitchChange };
+/**
+ * Specifies an Angular router link with the `route` property or a direct
+ * link with the `url` property. If it provides both, the button uses
+ * the `route` property.
+ */
+interface SkyButtonPermalink {
+    /**
+     * The Angular router link for the button. This property accepts a
+     * custom object with a `commands` property to specify router commands and an `extras`
+     * property to specify
+     * [Angular `NavigationExtras`](https://angular.dev/api/router/NavigationExtras).
+     * This property passes the following properties:
+     * - `permalink.route?.extras?.fragment` to
+     * [`fragment`](https://angular.dev/api/router/NavigationExtras#fragment)
+     * - `permalink.route?.extras?.queryParams` to
+     * [`queryParams`](https://angular.dev/api/router/NavigationExtras#queryParams)
+     * - `permalink.route?.extras?.queryParamsHandling` to
+     * [`queryParamsHandling`](https://angular.dev/api/router/NavigationExtras#queryParamsHandling)
+     * - `permalink.route?.commands` to
+     * [`routerLink`](https://angular.dev/api/router/RouterLink)
+     */
+    route?: {
+        commands?: unknown[] | string;
+        extras?: NavigationExtras;
+    };
+    /**
+     * The direct link for the button.
+     */
+    url?: string;
+}
+
+type SkyButtonStyle = 'danger' | 'default' | 'icon-borderless' | 'link' | 'link-inline' | 'primary';
+
+type SkyButtonType = 'button' | 'reset' | 'submit';
+
+/**
+ * Buttons provide interactive elements for users to trigger actions in the system.
+ */
+declare class SkyButton {
+    /**
+     * Whether the button is displayed as a block element that fills the horizontal space of its container.
+     * @default false
+     */
+    readonly block: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The display style of the button.
+     * @default "default"
+     */
+    readonly buttonStyle: i0.InputSignal<SkyButtonStyle>;
+    /**
+     * The type of the underlying HTML button element.
+     * @default "button"
+     */
+    readonly buttonType: i0.InputSignal<SkyButtonType>;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The name of the icon to display.
+     */
+    readonly iconName: i0.InputSignal<string>;
+    /**
+     * Whether to hide the button's label. When the label is hidden, `labelText` is used as the button's ARIA label.
+     * @default false
+     */
+    readonly labelHidden: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The text to display as the button's label.
+     * @required
+     */
+    readonly labelText: i0.InputSignal<string>;
+    /**
+     * Whether the icon is a logo icon.
+     * @default false
+     */
+    readonly logo: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The link for the button.
+     */
+    readonly permalink: i0.InputSignal<SkyButtonPermalink | undefined>;
+    /**
+     * Fires when the button is clicked.
+     */
+    readonly buttonClick: i0.OutputEmitterRef<PointerEvent>;
+    protected readonly ariaLabel: i0.Signal<string | null>;
+    protected readonly buttonClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyButton, "sky-button", never, { "block": { "alias": "block"; "required": false; "isSignal": true; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; "isSignal": true; }; "buttonType": { "alias": "buttonType"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": true; "isSignal": true; }; "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "permalink": { "alias": "permalink"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; }, never, never, true, never>;
+}
+
+export { SKY_FORM_ERRORS_ENABLED, SkyButton, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxGridAlignItems, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
+export type { SkyButtonPermalink, SkyButtonStyle, SkyButtonType, SkyCheckboxChange, SkyCheckboxGroupHeadingLevel, SkyCheckboxGroupHeadingStyle, SkyFieldGroupHeadingLevel, SkyFieldGroupHeadingStyle, SkyFileAttachmentChange, SkyFileAttachmentClick, SkyFileDropChange, SkyFileItem, SkyFileItemErrorType, SkyFileLink, SkyFileValidateFn, SkyInputBoxPopulateArgs, SkyRadioChange, SkyRadioGroupHeadingLevel, SkyRadioGroupHeadingStyle, SkyRadioType, SkySelectionBoxGridAlignItemsType, SkyToggleSwitchChange };