@skyux/modals
Version:
This library was generated with [Nx](https://nx.dev).
648 lines (617 loc) • 26 kB
TypeScript
import { Observable, Subject } from 'rxjs';
import * as i0 from '@angular/core';
import { ElementRef, ComponentRef, StaticProvider, AfterViewInit, OnDestroy, OnInit, TemplateRef } from '@angular/core';
import * as i1 from '@skyux/core';
import { SkyAppWindowRef, SkyDynamicComponentService, SkyDynamicComponentLegacyService, SkyScrollShadowEventArgs } from '@skyux/core';
/**
* @internal
*/
type SkyConfirmButtonAction = 'ok' | 'yes' | 'no' | 'cancel';
interface SkyConfirmButtonConfig {
/**
* The identifier to return when users select the button to close the
* dialog. This is useful to determine which button users select.
*/
action: string;
/**
* The label for the button.
*/
text: string;
/**
* The style to apply to the button. The valid options are `primary` for
* the button that triggers the recommended or most-common action, `default` for
* buttons that trigger less-common actions, `link` for a button that closes
* the dialog, and `danger` for a primary action that deletes existing data.
*/
styleType?: 'primary' | 'default' | 'link' | string;
/**
* Whether to place focus on this button by default.
* @deprecated The confirm component automatically focuses the first interactive
* element of the dialog.
*/
autofocus?: boolean;
}
type SkyConfirmButtonStyleType = 'primary' | 'default' | 'link' | 'danger';
interface SkyConfirmCloseEventArgs {
/**
* The identifier for the button that users selected to close the dialog.
*/
action: string;
}
declare enum SkyConfirmType {
/**
* Allows you to define your own buttons using the `buttons` property of `SkyConfirmConfig`.
*/
Custom = 0,
/**
* Displays one button with an **OK** label and an `'ok'` action.
*/
OK = 1,
/**
* Displays two buttons with **Yes** and **Cancel** labels.
* @deprecated Use the `Custom` type to follow the guidance that labels
* should clearly indicate the actions that occur when users select buttons.
*/
YesCancel = 2,
/**
* Displays three buttons with **Yes**, **No**, and **Cancel** labels.
* @deprecated Use the `Custom` type to follow the guidance that labels
* should clearly indicate the actions that occur when users select buttons.
*/
YesNoCancel = 3
}
interface SkyConfirmConfig {
/**
* The message to display in bold at the top of the dialog.
* @required
*/
message: string;
/**
* Secondary text to display under the primary message.
*/
body?: string;
/**
* The list of buttons to display when the `type` property is set to `SkyConfirmType.Custom`.
*/
buttons?: SkyConfirmButtonConfig[];
/**
* Whether to preserve whitespace and new lines inside the dialog.
* @default false
*/
preserveWhiteSpace?: boolean;
/**
* The preset button configuration for the dialog.
*/
type?: SkyConfirmType;
}
declare class SkyConfirmInstance {
#private;
/**
* Fires when users select an action to close the dialog. This event
* returns a `SkyConfirmCloseEventArgs` object with information about the button that
* users select. It returns the `'cancel'` action when users press the <kbd>Escape</kbd> key.
*/
get closed(): Observable<SkyConfirmCloseEventArgs>;
/**
* Closes the confirm instance.
* @param args Specifies an object to emit to subscribers of the `closed` event
* of the confirm instance.
*/
close(args: SkyConfirmCloseEventArgs): void;
}
/**
* @internal
*/
interface SkyConfirmServiceInterface {
open(config: SkyConfirmConfig): SkyConfirmInstance;
}
/**
* @deprecated The `SkyConfirmModule` is no longer needed and can be removed from your application.
* @internal
*/
declare class SkyConfirmModule {
static ɵfac: i0.ɵɵFactoryDeclaration<SkyConfirmModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<SkyConfirmModule, never, never, never>;
static ɵinj: i0.ɵɵInjectorDeclaration<SkyConfirmModule>;
}
/**
* @internal
*/
declare class SkyModalAdapterService {
#private;
private static readonly MODAL_BODY_FULL_CLASS;
private static readonly MODAL_BODY_CLASS;
constructor(windowRef: SkyAppWindowRef);
toggleFullPageModalClass(isAddFull: boolean): void;
setPageScroll(isAdd: boolean): void;
getModalOpener(): HTMLElement;
scrollContentToTop(element: ElementRef): void;
/**
* Hides siblings of modal-host from screen readers
* @param hostElRef reference to modal-host element
*/
hideHostSiblingsFromScreenReaders(hostElRef: ElementRef): void;
focusFirstElement(modalEl: ElementRef): void;
/**
* Restores modal-host siblings to screen reader status prior to modals being opened
*/
unhideOrRestoreHostSiblingsFromScreenReaders(): void;
hidePreviousModalFromScreenReaders(topModal: ElementRef): void;
unhidePreviousModalFromScreenReaders(topModal: ElementRef): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalAdapterService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<SkyModalAdapterService>;
}
/**
* Contains an object with the data passed from users when
* a modal is closed and the reason that the modal was closed.
*/
declare class SkyModalCloseArgs {
/**
* The reason the modal was closed.
* Options include `"close"`, `"save"`, and `"cancel"`.
*/
reason: string | undefined;
/**
* The data passed from users when the modal is closed.
*/
data: any;
}
/**
* Properties about the modal close action and a method to close the modal.
*/
declare class SkyModalBeforeCloseHandler {
/**
* The object that would be emitted by a modal's `closed` event. This object
* can be used to determine whether to prompt the user for confirmation, such
* as when the user closes a modal form after entering data.
*/
readonly closeArgs: SkyModalCloseArgs;
/**
* Function to call to close the modal. Neglecting to call this function
* effectively cancels the close modal action.
*/
readonly closeModal: () => void;
constructor(closeModal: () => void, closeArgs: SkyModalCloseArgs);
}
declare class SkyModalInstance {
#private;
/**
* An event that the modal instance emits when it is about to close.
* It emits a `SkyModalBeforeCloseHandler` object with a `closeModal` method
* that closes the modal. If a subscription exists for this event,
* the modal does not close until the subscriber calls the `closeModal` method.
*/
get beforeClose(): Observable<SkyModalBeforeCloseHandler>;
/**
* An event that the modal instance emits when it closes.
* It emits a `SkyModalCloseArgs` object with a `data` property that includes
* data passed from users on close or save and a `reason` property that indicates
* whether the modal was saved or closed without saving.
* The `reason` property accepts any string value.
* Common examples include `"cancel"`, `"close"`, and `"save"`.
*/
get closed(): Observable<SkyModalCloseArgs>;
/**
* An event that the modal instance emits when users click
* the help inline button.
* If a `helpKey` parameter was specified, the `helpOpened` event broadcasts the `helpKey`.
* @deprecated
*/
get helpOpened(): Observable<string>;
/**
* A direct reference to the provided component's class.
*/
componentInstance: any;
/**
* Sets the component adapter for the instance. This is used internally for actions such as scrolling the content.
* @internal
*/
set adapter(value: SkyModalAdapterService);
/**
* Sets the component ref for the instance. This is used to extract the component instance for the public API and the element ref for internal use.
* @internal
*/
set componentRef(value: ComponentRef<any>);
/**
* Closes the modal instance.
* @param result Specifies an object to emit to subscribers of the `closed` event of the
* modal instance. The `SkyModalInstance` provider can be injected into a component's constructor
* so that this `close` function can be called from a button in the `sky-modal-footer`.
* @param reason Specifies the reason for the modal closing, with the default reason of `"close"`.
* @param ignoreBeforeClose Indicates whether to ignore the modal instance's `beforeClose` event.
*/
close(result?: any, reason?: string, ignoreBeforeClose?: boolean): void;
/**
* Closes the modal instance with `reason="cancel"`.
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
* that this cancel function can be called from a button in the `sky-modal-footer`.
*/
cancel(result?: any): void;
/**
* Closes the modal instance with `reason="save"`.
* @param result Specifies an object to emit to subscribers of the `closed` event of the modal
* instance. The `SkyModalInstance` provider can be injected into a component's constructor so
* that this `save` function can be called from a button in `the sky-modal-footer`.
*/
save(result?: any): void;
/**
* Scrolls the modal content area to the top of its scrollable area.
*/
scrollContentToTop(): void;
/**
* Triggers the `helpOpened` event that broadcasts a `helpKey` parameter to open
* when users click the help inline button.
* @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;
}
/**
* Specifies configuration options for creating a modal.
*/
interface SkyModalConfigurationInterface {
/**
* Whether to display the modal full screen.
* This property defaults to `false`.
*/
fullPage?: boolean;
/**
* The size for the modal. The valid options are `small`, `medium`, and `large`.
* This property defaults to `medium`.
*/
size?: string;
/**
* An array property of `providers`.
* In Angular, a provider is something that can create or deliver a service.
* This property can be used to pass context values from the component that launches the modal to the modal component.
*/
providers?: StaticProvider[];
/**
* The HTML element ID of the element that describes
* the modal. This sets the modal's `aria-describedby` attribute to provide a text equivalent for
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
* The description typically includes text on the modal but not on items that users interact
* 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;
/**
* The HTML element ID of the element that labels
* the modal. This sets the `aria-labelledby` attribute for the modal to provide a text equivalent for
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
* 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;
/**
* The ARIA role for the modal
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
* by indicating how the modal functions and what it controls. For information about
* how an ARIA role indicates what an item represents on a web page, see the
* [WAI-ARIA roles model](http://www.w3.org/WAI/PF/aria/#roles). By default, modals set
* the ARIA role to `dialog`.
* @default "dialog"
*/
ariaRole?: string;
/**
* Whether the modal uses tiles. When set to `true`, the modal's background switches
* to `$sky-background-color-neutral-light` and tile headings are styled as subsection headings.
* This property defaults to `false`.
* @deprecated Tiles inside modals are no longer a recommended design pattern. For complex forms, use [sectioned forms](https://developer.blackbaud.com/skyux/components/sectioned-form) or [other form containers](https://developer.blackbaud.com/skyux/design/guidelines/form-design) instead.
*/
tiledBody?: boolean;
/**
* The `helpKey` string. This property displays
* the help inline 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;
/**
* The CSS class, such as `ag-custom-component-popup`, to add to the modal
* that you open from a cell in the data entry grid.
*/
wrapperClass?: string;
}
/**
* @internal
*/
interface SkyModalServiceInterface {
open(component: any, config?: SkyModalConfigurationInterface | any[]): SkyModalInstance;
}
/**
* A service that launches modals.
*/
declare class SkyModalService implements SkyModalServiceInterface {
#private;
private static host;
constructor(dynamicComponentService: SkyDynamicComponentService);
/**
* @internal
* Removes the modal host from the DOM.
*/
dispose(): void;
/**
* Opens a modal using the specified component.
* @param component Determines the component to render.
* @param {SkyModalConfigurationInterface} config Specifies configuration options for the modal.
*/
open(component: any, config?: SkyModalConfigurationInterface | any[]): SkyModalInstance;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<SkyModalService>;
}
/**
* A service that launches modals.
* @internal
* @deprecated Use `SkyModalService` to open a standalone component instead.
*/
declare class SkyModalLegacyService extends SkyModalService {
constructor(dynamicComponentSvc: SkyDynamicComponentLegacyService);
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalLegacyService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<SkyModalLegacyService>;
}
/**
* Launches a dialog.
*/
declare class SkyConfirmService implements SkyConfirmServiceInterface {
#private;
constructor(modalService: SkyModalService);
/**
* Opens a dialog using the specified options.
* @param config Specifies configuration options for the dialog.
*/
open(config: SkyConfirmConfig): SkyConfirmInstance;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyConfirmService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<SkyConfirmService>;
}
/**
* @internal
*/
declare class SkyModalConfiguration {
fullPage?: boolean;
size?: string;
/**
* @deprecated
*/
ariaDescribedBy?: string;
/**
* @deprecated
*/
ariaLabelledBy?: string;
ariaRole?: string;
/**
* @deprecated
*/
tiledBody?: boolean;
/**
* @deprecated
*/
helpKey?: string;
wrapperClass?: string;
constructor();
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalConfiguration, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<SkyModalConfiguration>;
}
/**
* Contains an object with properties for displaying form-level errors in the modal.
*/
interface SkyModalError {
/**
* The error message to display.
*/
message: string;
}
/**
* @internal
*/
declare class SkyModalErrorsService {
#private;
formErrors: Observable<SkyModalError[] | undefined>;
constructor();
updateErrors(value: SkyModalError[] | undefined): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalErrorsService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<SkyModalErrorsService>;
}
/**
* @internal
*/
declare class SkyModalHostService {
#private;
static get openModalCountChange(): Observable<number>;
static get backdropZIndexChange(): Observable<number>;
/**
* @deprecated Subscribe to `openModalCountChange` instead.
*/
static get openModalCount(): number;
static get fullPageModalCount(): number;
/**
* @deprecated Subscribe to `backdropZIndexChange` instead.
*/
static get backdropZIndex(): number;
static get topModal(): SkyModalHostService;
close: Subject<void>;
fullPage: boolean;
/**
* @deprecated
*/
openHelp: Subject<string>;
zIndex: number;
constructor();
getModalZIndex(): number;
onClose(): void;
/**
* @deprecated
*/
onOpenHelp(helpKey: string): void;
destroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalHostService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<SkyModalHostService>;
}
/**
* Provides a common look-and-feel for modal content with options to display
* a common modal header, specify body content, and display a common modal footer
* and buttons.
*/
declare class SkyModalComponent implements AfterViewInit, OnDestroy, OnInit {
#private;
wrapperClass: string | undefined;
/**
* A list of form-level errors to display to the user.
*/
set formErrors(value: SkyModalError[] | undefined);
/**
* The text to display as the modal's heading.
*/
headingText: string | undefined;
/**
* A help key that identifies the global help content to display. When specified along with `headingText`, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline) button is
* added to the modal header. Clicking the button invokes [global help](https://developer.blackbaud.com/skyux/learn/develop/global-help) as configured by the application. This property only applies when `headingText` is also specified.
*/
helpKey: string | undefined;
/**
* The content of the help popover. When specified along with `headingText`, 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. This property only applies when `headingText` is also specified.
*/
helpPopoverContent: string | TemplateRef<unknown> | undefined;
/**
* The title of the help popover. This property only applies when `helpPopoverContent` is
* also specified.
*/
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;
readonly layout: i0.InputSignal<"none" | "fit">;
ariaOwns: string | null;
/**
* @deprecated
*/
legacyHelpKey: string | undefined;
modalState: string;
modalZIndex: number | undefined;
scrollShadow: SkyScrollShadowEventArgs;
size: string;
modalContentWrapperElement: ElementRef | undefined;
protected scrollShadowEnabled: boolean;
constructor();
onDocumentKeyUp(event: KeyboardEvent): void;
onDocumentKeyDown(event: KeyboardEvent): void;
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* @deprecated
*/
helpButtonClick(): void;
closeButtonClick(): void;
windowResize(): void;
scrollShadowChange(args: SkyScrollShadowEventArgs): void;
viewkeeperEnabled(): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalComponent, 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; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, ["sky-modal-header", "sky-modal-content", "sky-modal-footer"], true, never>;
}
/**
* Specifies content to display in the modal's body.
*/
declare class SkyModalContentComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalContentComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SkyModalContentComponent, "sky-modal-content", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.SkyResponsiveHostDirective; inputs: {}; outputs: {}; }]>;
}
/**
* Specifies content to display in the modal's footer.
*/
declare class SkyModalFooterComponent {
protected readonly errorsSvc: SkyModalErrorsService;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalFooterComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SkyModalFooterComponent, "sky-modal-footer", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.SkyResponsiveHostDirective; inputs: {}; outputs: {}; }]>;
}
/**
* Specifies a header for the modal.
*/
declare class SkyModalHeaderComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalHeaderComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SkyModalHeaderComponent, "sky-modal-header", never, {}, {}, never, ["*", ".sky-control-help"], true, never>;
}
/**
* Provides a way to mark a modal as "dirty" and displays a confirmation
* message when a user closes the modal without saving.
*/
declare class SkyModalIsDirtyDirective implements OnInit, OnDestroy {
#private;
/**
* Whether the user edited an input on the modal.
* @required
*/
isDirty: boolean;
ngOnInit(): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalIsDirtyDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyModalIsDirtyDirective, "sky-modal[isDirty]", never, { "isDirty": { "alias": "isDirty"; "required": false; }; }, {}, never, never, true, never>;
}
declare class SkyModalModule {
static ɵfac: i0.ɵɵFactoryDeclaration<SkyModalModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<SkyModalModule, never, [typeof SkyModalComponent, typeof SkyModalContentComponent, typeof SkyModalFooterComponent, typeof SkyModalHeaderComponent, typeof SkyModalIsDirtyDirective], [typeof SkyModalComponent, typeof SkyModalContentComponent, typeof SkyModalFooterComponent, typeof SkyModalHeaderComponent, typeof SkyModalIsDirtyDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration<SkyModalModule>;
}
/**
* The view model for button configuration that the confirm component uses.
* @internal
*/
interface SkyConfirmButton {
action: SkyConfirmButtonAction;
styleType: SkyConfirmButtonStyleType;
text: string;
autofocus?: boolean;
}
/**
* @internal
*/
declare class SkyConfirmComponent implements OnDestroy {
#private;
protected body: string | undefined;
protected bodyId: string;
protected buttons: SkyConfirmButton[] | undefined;
protected isOkType: boolean;
protected message: string;
protected preserveWhiteSpace: boolean;
constructor();
ngOnDestroy(): void;
protected close(button: SkyConfirmButton): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SkyConfirmComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SkyConfirmComponent, "sky-confirm", never, {}, {}, never, never, true, never>;
}
export { SkyConfirmInstance, SkyConfirmModule, SkyConfirmService, SkyConfirmType, SkyModalBeforeCloseHandler, SkyModalCloseArgs, SkyModalConfiguration, SkyModalErrorsService, SkyModalHostService, SkyModalInstance, SkyModalLegacyService, SkyModalModule, SkyModalService, SkyConfirmComponent as λ1, SkyModalContentComponent as λ2, SkyModalFooterComponent as λ3, SkyModalHeaderComponent as λ4, SkyModalComponent as λ5, SkyModalIsDirtyDirective as λ6 };
export type { SkyConfirmButtonAction, SkyConfirmButtonConfig, SkyConfirmButtonStyleType, SkyConfirmCloseEventArgs, SkyConfirmConfig, SkyConfirmServiceInterface, SkyModalConfigurationInterface, SkyModalError, SkyModalServiceInterface };