UNPKG

@skyux/modals

Version:

This library was generated with [Nx](https://nx.dev).

648 lines (617 loc) 26 kB
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 };