@skyux/modals 10.31.0 → 10.32.0

package/lib/modules/modal/modal-instance.d.ts

@@ -25,6 +25,7 @@ export declare class SkyModalInstance {
      * An event that the modal instance emits when users click
      * the <i class="fa fa-question-circle" aria-hidden="true"></i> button.
      * If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.
+     * @deprecated
      */
     get helpOpened(): Observable<string>;
     /**
@@ -74,6 +75,7 @@ export declare class SkyModalInstance {
      * @param helpKey Specifies a string to emit to subscribers of
      * the modal instance's `helpOpened` event. Consumers can inject the `SkyModalInstance` provider
      * into a component's constructor to call the `openHelp` function in the modal template.
+     * @deprecated
      */
     openHelp(helpKey: string): void;
 }

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { SkyModalError } from './modal-error';
 import { SkyModalScrollShadowEventArgs } from './modal-scroll-shadow-event-args';
 import * as i0 from "@angular/core";
@@ -15,26 +15,59 @@ export declare class SkyModalComponent implements AfterViewInit, OnDestroy, OnIn
      */
     set formErrors(value: SkyModalError[] | undefined);
     /**
+     * The text to display as the modal's heading.
+     * @preview
+     */
+    headingText: string | undefined;
+    /**
+     * A help key that identifies the global help content to display. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline) button is
+     * added to the modal header. Clicking the button invokes global help as configured by the application.
+     * @preview
+     */
+    helpKey: string | undefined;
+    /**
+     * The content of the help popover. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)
+     * button is added to the modal header. 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;
+    /**
+     * Used by the confirm component to set a different role for the modal.
      * @internal
      */
     set ariaRole(value: string | undefined);
     ariaRoleOrDefault: string;
     /**
      * @internal
+     * @deprecated
      */
     tiledBody: boolean | undefined;
     /**
+     * Used by the confirm component to set descriptive text without using a
+     * modal header.
      * @internal
      */
     set ariaDescribedBy(id: string | undefined);
     get ariaDescribedBy(): string | undefined;
     /**
+     * Used by the confirm component to set descriptive text without using a
+     * modal header.
      * @internal
      */
     set ariaLabelledBy(id: string | undefined);
     get ariaLabelledBy(): string | undefined;
     ariaOwns: string | null;
-    helpKey: string | undefined;
+    /**
+     * @deprecated
+     */
+    legacyHelpKey: string | undefined;
     modalState: string;
     modalZIndex: number | undefined;
     scrollShadow: SkyModalScrollShadowEventArgs | undefined;
@@ -46,11 +79,14 @@ export declare class SkyModalComponent implements AfterViewInit, OnDestroy, OnIn
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /**
+     * @deprecated
+     */
     helpButtonClick(): void;
     closeButtonClick(): void;
     windowResize(): void;
     scrollShadowChange(args: SkyModalScrollShadowEventArgs): void;
     viewkeeperEnabled(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyModalComponent, "sky-modal", never, { "formErrors": { "alias": "formErrors"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; "tiledBody": { "alias": "tiledBody"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; }, {}, never, ["sky-modal-header", "sky-modal-content", "sky-modal-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyModalComponent, "sky-modal", never, { "formErrors": { "alias": "formErrors"; "required": false; }; "headingText": { "alias": "headingText"; "required": false; }; "helpKey": { "alias": "helpKey"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; "tiledBody": { "alias": "tiledBody"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; }, {}, never, ["sky-modal-header", "sky-modal-content", "sky-modal-footer"], true, never>;
 }

package/lib/modules/modal/modal.interface.d.ts

@@ -27,6 +27,7 @@ export interface SkyModalConfigurationInterface {
      * with, such as buttons and forms. If you do not specify an ID, the default description is
      * the content of the `sky-modal-content` component.
      * For more information about the `aria-describedby` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-describedby).
+     * @deprecated Set `headingText` on the modal component instead.
      */
     ariaDescribedBy?: string;
     /**
@@ -36,6 +37,7 @@ export interface SkyModalConfigurationInterface {
      * This is typically a header element, and if you do not specify an ID, the default value
      * is the content of the `sky-modal-header` component.
      * For more information about the `aria-labelledby` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-labelledby).
+     * @deprecated Set `headingText` on the modal component instead.
      */
     ariaLabelledBy?: string;
     /**
@@ -56,12 +58,13 @@ export interface SkyModalConfigurationInterface {
      */
     tiledBody?: boolean;
     /**
-     * @deprecated To display a help button in the modal header, include a help button element, such as `sky-help-inline`, in the `sky-modal-header` element and a `sky-control-help` CSS class on that help button element
      * The `helpKey` string. This property displays
      * the <i class="fa fa-question-circle" aria-hidden="true"></i> button in the modal header.
      * When users click this button, the `helpOpened` event broadcasts the `helpKey` parameter.
      * Blackbaud developers can use the Help Widget, which is for internal Blackbaud use only, to
      * [display help content in a flyout panel](https://docs.blackbaud.com/bb-help-docs/components/modal-header).
+     * @deprecated To display a help button in the modal header, set either the
+     * `helpKey` or `helpPopoverContent` inputs on the modal component.
      */
     helpKey?: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/modals",
-  "version": "10.31.0",
+  "version": "10.32.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -40,13 +40,14 @@
     "@angular/common": "^17.3.4",
     "@angular/core": "^17.3.4",
     "@angular/router": "^17.3.4",
-    "@skyux/core": "10.31.0",
-    "@skyux/i18n": "10.31.0",
-    "@skyux/indicators": "10.31.0",
-    "@skyux/theme": "10.31.0"
+    "@skyux/core": "10.32.0",
+    "@skyux/help-inline": "10.32.0",
+    "@skyux/i18n": "10.32.0",
+    "@skyux/indicators": "10.32.0",
+    "@skyux/theme": "10.32.0"
   },
   "dependencies": {
-    "@skyux/icon": "10.31.0",
+    "@skyux/icon": "10.32.0",
     "tslib": "^2.6.2"
   },
   "module": "fesm2022/skyux-modals.mjs",

package/testing/modal/modal-harness.d.ts

@@ -1,4 +1,5 @@
 import { HarnessPredicate } from '@angular/cdk/testing';
+import { TemplateRef } from '@angular/core';
 import { SkyComponentHarness } from '@skyux/core/testing';
 import { SkyModalHarnessFilters } from './modal-harness-filters';
 /**
@@ -16,17 +17,35 @@ export declare class SkyModalHarness extends SkyComponentHarness {
      */
     static with(filters: SkyModalHarnessFilters): HarnessPredicate<SkyModalHarness>;
     /**
-     * Gets the aria-describedBy property of the modal
+     * Clicks the help inline button.
+     */
+    clickHelpInline(): Promise<void>;
+    /**
+     * Gets the aria-describedBy property of the modal.
+     * @deprecated
      */
     getAriaDescribedBy(): Promise<string | null>;
     /**
-     * Gets the aria-labelledBy property of the modal
+     * Gets the aria-labelledBy property of the modal.
+     * @deprecated
      */
     getAriaLabelledBy(): Promise<string | null>;
     /**
      * Gets the role of the modal.
      */
     getAriaRole(): Promise<string | null>;
+    /**
+     * Gets the modal's heading text.
+     */
+    getHeadingText(): Promise<string | undefined>;
+    /**
+     * Gets the help popover content.
+     */
+    getHelpPopoverContent(): Promise<TemplateRef<unknown> | string | undefined>;
+    /**
+     * Gets the help popover title.
+     */
+    getHelpPopoverTitle(): Promise<string | undefined>;
     /**
      * Gets the modal size.
      */