@skyux/layout 10.35.0 → 10.36.0

package/index.d.ts

@@ -6,6 +6,8 @@ export { SkyBackToTopModule } from './lib/modules/back-to-top/back-to-top.module
 export { SkyBackToTopMessage } from './lib/modules/back-to-top/models/back-to-top-message';
 export { SkyBackToTopMessageType } from './lib/modules/back-to-top/models/back-to-top-message-type';
 export { SkyBackToTopOptions } from './lib/modules/back-to-top/models/back-to-top-options';
+export { SkyBoxHeadingLevel } from './lib/modules/box/box-heading-level';
+export { SkyBoxHeadingStyle } from './lib/modules/box/box-heading-style';
 export { SkyBoxModule } from './lib/modules/box/box.module';
 export { SkyCardModule } from './lib/modules/card/card.module';
 export { SkyDefinitionListModule } from './lib/modules/definition-list/definition-list.module';

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

@@ -1,9 +1,11 @@
 import * as i0 from "@angular/core";
 /**
  * Specifies a header for the box.
+ * @deprecated Use `headingText` input on the `sky-box` component instead.
  */
 export declare class SkyBoxHeaderComponent {
     protected readonly boxHeaderId: string;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyBoxHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SkyBoxHeaderComponent, "sky-box-header", never, {}, {}, never, ["*", ".sky-control-help"], false, never>;
 }

package/lib/modules/box/box-heading-level.d.ts

@@ -0,0 +1 @@
+export type SkyBoxHeadingLevel = 2 | 3 | 4 | 5;

package/lib/modules/box/box-heading-style.d.ts

@@ -0,0 +1 @@
+export type SkyBoxHeadingStyle = 2 | 3 | 4 | 5;

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

@@ -1,16 +1,62 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
 import { SkyBoxControlsComponent } from './box-controls.component';
+import { SkyBoxHeadingLevel } from './box-heading-level';
+import { SkyBoxHeadingStyle } from './box-heading-style';
 import * as i0 from "@angular/core";
 /**
  * Provides a common look-and-feel for box content with options to display a common box header, specify body content, and display common box controls.
  */
 export declare class SkyBoxComponent {
     #private;
+    /**
+     * The text to display as the box's heading.
+     * @preview
+     */
+    set headingText(value: string | undefined);
+    get headingText(): string | undefined;
+    /**
+     * Indicates whether to hide the `headingText`.
+     * @preview
+     */
+    headingHidden: boolean;
+    /**
+     * The semantic heading level in the document structure. The default is 2.
+     * @preview
+     * @default 2
+     */
+    headingLevel: SkyBoxHeadingLevel;
+    /**
+     * The heading [font style](https://developer.blackbaud.com/skyux/design/styles/typography#headings).
+     * @preview
+     * @default 2
+     */
+    set headingStyle(value: SkyBoxHeadingStyle);
+    /**
+     * The content of the help popover. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)
+     * button is added to the box heading. 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;
+    /**
+     * 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 placed beside the box heading. Clicking the button invokes [global help](https://developer.blackbaud.com/skyux/learn/develop/global-help)
+     * as configured by the application.
+     * @preview
+     */
+    helpKey: string | undefined;
     /**
      * The ARIA label for the box. This sets the box's `aria-label` attribute to provide a text equivalent for screen readers
      * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
      * If the box includes a visible label, use `ariaLabelledBy` instead.
      * For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).
+     * @deprecated Use `headingText` instead.
      */
     ariaLabel: string | undefined;
     /**
@@ -19,6 +65,7 @@ export declare class SkyBoxComponent {
      * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
      * If the box does not include a visible label, use `ariaLabel` instead.
      * For more information about the `aria-labelledby` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-labelledby).
+     * @deprecated Use `headingText` instead.
      */
     ariaLabelledBy: string | undefined;
     /**
@@ -31,6 +78,11 @@ export declare class SkyBoxComponent {
     ariaRole: string | undefined;
     set boxHeaderRef(value: ElementRef | undefined);
     set boxControls(value: SkyBoxControlsComponent | undefined);
+    headerId: string;
+    protected headingClass: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyBoxComponent, "sky-box", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; }, {}, ["boxHeaderRef", "boxControls"], ["sky-box-header", "sky-box-controls", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyBoxComponent, "sky-box", never, { "headingText": { "alias": "headingText"; "required": false; }; "headingHidden": { "alias": "headingHidden"; "required": false; }; "headingLevel": { "alias": "headingLevel"; "required": false; }; "headingStyle": { "alias": "headingStyle"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "helpKey": { "alias": "helpKey"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; }, {}, ["boxHeaderRef", "boxControls"], ["sky-box-header", "sky-box-controls", "*"], false, never>;
+    static ngAcceptInputType_headingHidden: unknown;
+    static ngAcceptInputType_headingLevel: unknown;
+    static ngAcceptInputType_headingStyle: unknown;
 }

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

@@ -4,10 +4,11 @@ import * as i2 from "./box-header.component";
 import * as i3 from "./box-content.component";
 import * as i4 from "./box-controls.component";
 import * as i5 from "@angular/common";
-import * as i6 from "@skyux/theme";
-import * as i7 from "@skyux/core";
+import * as i6 from "@skyux/help-inline";
+import * as i7 from "@skyux/theme";
+import * as i8 from "@skyux/core";
 export declare class SkyBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyBoxModule, [typeof i1.SkyBoxComponent, typeof i2.SkyBoxHeaderComponent, typeof i3.SkyBoxContentComponent, typeof i4.SkyBoxControlsComponent], [typeof i5.CommonModule, typeof i6.SkyThemeModule, typeof i7.SkyTrimModule], [typeof i1.SkyBoxComponent, typeof i2.SkyBoxHeaderComponent, typeof i3.SkyBoxContentComponent, typeof i4.SkyBoxControlsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyBoxModule, [typeof i1.SkyBoxComponent, typeof i2.SkyBoxHeaderComponent, typeof i3.SkyBoxContentComponent, typeof i4.SkyBoxControlsComponent], [typeof i5.CommonModule, typeof i6.SkyHelpInlineModule, typeof i7.SkyThemeModule, typeof i8.SkyTrimModule], [typeof i1.SkyBoxComponent, typeof i2.SkyBoxHeaderComponent, typeof i3.SkyBoxContentComponent, typeof i4.SkyBoxControlsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SkyBoxModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/layout",
-  "version": "10.35.0",
+  "version": "10.36.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -43,18 +43,18 @@
     "@angular/forms": "^17.3.4",
     "@angular/platform-browser": "^17.3.4",
     "@angular/router": "^17.3.4",
-    "@skyux-sdk/testing": "10.35.0",
-    "@skyux/core": "10.35.0",
-    "@skyux/forms": "10.35.0",
-    "@skyux/help-inline": "10.35.0",
-    "@skyux/i18n": "10.35.0",
-    "@skyux/indicators": "10.35.0",
-    "@skyux/modals": "10.35.0",
-    "@skyux/router": "10.35.0",
-    "@skyux/theme": "10.35.0"
+    "@skyux-sdk/testing": "10.36.0",
+    "@skyux/core": "10.36.0",
+    "@skyux/forms": "10.36.0",
+    "@skyux/help-inline": "10.36.0",
+    "@skyux/i18n": "10.36.0",
+    "@skyux/indicators": "10.36.0",
+    "@skyux/modals": "10.36.0",
+    "@skyux/router": "10.36.0",
+    "@skyux/theme": "10.36.0"
   },
   "dependencies": {
-    "@skyux/icon": "10.35.0",
+    "@skyux/icon": "10.36.0",
     "tslib": "^2.6.2"
   },
   "module": "fesm2022/skyux-layout.mjs",

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

@@ -1,5 +1,7 @@
 import { HarnessPredicate } from '@angular/cdk/testing';
+import { TemplateRef } from '@angular/core';
 import { SkyComponentHarness } from '@skyux/core/testing';
+import { SkyBoxHeadingLevel, SkyBoxHeadingStyle } from '@skyux/layout';
 import { SkyBoxHarnessFilters } from './box-harness.filters';
 export declare class SkyBoxHarness extends SkyComponentHarness {
     #private;
@@ -12,6 +14,35 @@ export declare class SkyBoxHarness extends SkyComponentHarness {
      * `SkyBoxHarness` that meets certain criteria
      */
     static with(filters: SkyBoxHarnessFilters): HarnessPredicate<SkyBoxHarness>;
+    /**
+     * Clicks the help inline button.
+     */
+    clickHelpInline(): Promise<void>;
+    /**
+     * Gets the help popover content.
+     */
+    getHelpPopoverContent(): Promise<TemplateRef<unknown> | string | undefined>;
+    /**
+     * Gets the help popover title.
+     */
+    getHelpPopoverTitle(): Promise<string | undefined>;
+    /**
+     * Gets the box's heading text. If `headingHidden` is true,
+     * the text will still be returned.
+     */
+    getHeadingText(): Promise<string | undefined>;
+    /**
+     * Whether the heading is hidden.
+     */
+    getHeadingHidden(): Promise<boolean>;
+    /**
+     * The semantic heading level used for the checkbox group. Returns undefined if heading level is not set.
+     */
+    getHeadingLevel(): Promise<SkyBoxHeadingLevel | undefined>;
+    /**
+     * The heading style used for the checkbox group.
+     */
+    getHeadingStyle(): Promise<SkyBoxHeadingStyle>;
     /**
      * Gets the aria-label property of the box
      */