@nysds/nys-modal 1.19.0 → 1.19.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nys-modal.d.ts +86 -0
- package/dist/nys-modal.js +1 -1
- package/package.json +4 -3
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* An accessible modal dialog with focus trapping, keyboard navigation, and scroll management.
|
|
4
|
+
*
|
|
5
|
+
* Set `open` to show the modal. Content goes in the default slot; action buttons in the `actions` slot.
|
|
6
|
+
* Dismisses via close button or Escape key unless `mandatory` is set. Focus returns to trigger on close.
|
|
7
|
+
*
|
|
8
|
+
* @summary Accessible modal dialog with focus trap, keyboard support, and action slots.
|
|
9
|
+
* @element nys-modal
|
|
10
|
+
*
|
|
11
|
+
* @slot - Default slot for body content.
|
|
12
|
+
* @slot actions - Action buttons displayed in footer. Buttons auto-resize on mobile.
|
|
13
|
+
*
|
|
14
|
+
* @fires nys-open - Fired when modal opens. Detail: `{id}`.
|
|
15
|
+
* @fires nys-close - Fired when modal closes. Detail: `{id}`.
|
|
16
|
+
*
|
|
17
|
+
* @example Basic modal
|
|
18
|
+
* ```html
|
|
19
|
+
* <nys-modal id="confirm-modal" heading="Confirm action" open>
|
|
20
|
+
* <p>Are you sure you want to proceed?</p>
|
|
21
|
+
* <div slot="actions">
|
|
22
|
+
* <nys-button label="Cancel" variant="outline"></nys-button>
|
|
23
|
+
* <nys-button label="Confirm" variant="filled"></nys-button>
|
|
24
|
+
* </div>
|
|
25
|
+
* </nys-modal>
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare class NysModal extends LitElement {
|
|
29
|
+
static styles: import("lit").CSSResult;
|
|
30
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
31
|
+
id: string;
|
|
32
|
+
/** Modal heading text. Required for accessibility. */
|
|
33
|
+
heading: string;
|
|
34
|
+
/** Secondary heading below the main heading. */
|
|
35
|
+
subheading: string;
|
|
36
|
+
/** Controls modal visibility. Set to `true` to show. */
|
|
37
|
+
open: boolean;
|
|
38
|
+
/** Prevents dismissal via close button or Escape key. User must take an action. */
|
|
39
|
+
mandatory: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Modal width: `sm` (400px), `md` (600px), or `lg` (800px).
|
|
42
|
+
* @default "md"
|
|
43
|
+
*/
|
|
44
|
+
width: "sm" | "md" | "lg";
|
|
45
|
+
private _actionButtonSlot;
|
|
46
|
+
private _prevFocusedElement;
|
|
47
|
+
private _originalBodyOverflow;
|
|
48
|
+
private _mobileMedia;
|
|
49
|
+
private hasBodySlots;
|
|
50
|
+
private hasActionSlots;
|
|
51
|
+
/**
|
|
52
|
+
* Lifecycle Methods
|
|
53
|
+
* --------------------------------------------------------------------------
|
|
54
|
+
*/
|
|
55
|
+
constructor();
|
|
56
|
+
connectedCallback(): void;
|
|
57
|
+
disconnectedCallback(): void;
|
|
58
|
+
updated(changeProps: Map<string, any>): Promise<void>;
|
|
59
|
+
/**
|
|
60
|
+
* Functions
|
|
61
|
+
* --------------------------------------------------------------------------
|
|
62
|
+
*/
|
|
63
|
+
private _hideBodyScroll;
|
|
64
|
+
private _restoreBodyScroll;
|
|
65
|
+
private _savePrevFocused;
|
|
66
|
+
private _focusOnModal;
|
|
67
|
+
private _restorePrevFocused;
|
|
68
|
+
private _handleBodySlotChange;
|
|
69
|
+
private _handleActionSlotChange;
|
|
70
|
+
private _updateSlottedButtonWidth;
|
|
71
|
+
private _dispatchOpenEvent;
|
|
72
|
+
private _dispatchCloseEvent;
|
|
73
|
+
private _getAriaDescribedBy;
|
|
74
|
+
/**
|
|
75
|
+
* This exist to prevent the VO for dismiss button from announcing itself between the heading & subheading/slot content.
|
|
76
|
+
* We add the "Close this window" ariaLabel after the initial VO is done
|
|
77
|
+
*/
|
|
78
|
+
private _updateDismissAria;
|
|
79
|
+
/**
|
|
80
|
+
* Event Handlers
|
|
81
|
+
* --------------------------------------------------------------------------
|
|
82
|
+
*/
|
|
83
|
+
private _handleKeydown;
|
|
84
|
+
private _closeModal;
|
|
85
|
+
render(): "" | import("lit-html").TemplateResult<1>;
|
|
86
|
+
}
|
package/dist/nys-modal.js
CHANGED
|
@@ -5,7 +5,7 @@ import { property as d, state as v } from "lit/decorators.js";
|
|
|
5
5
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
6
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
7
|
*
|
|
8
|
-
* Modal Component v1.19.
|
|
8
|
+
* Modal Component v1.19.2
|
|
9
9
|
* Part of the New York State Design System
|
|
10
10
|
* Repository: https://github.com/its-hcd/nysds
|
|
11
11
|
* License: MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-modal",
|
|
3
|
-
"version": "1.19.
|
|
3
|
+
"version": "1.19.2",
|
|
4
4
|
"description": "The Modal component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-modal.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"test:watch": "vite build && wtr --watch"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@nysds/nys-button": "^1.19.
|
|
25
|
+
"@nysds/nys-button": "^1.19.2"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"lit": "^3.3.1",
|
|
@@ -39,5 +39,6 @@
|
|
|
39
39
|
"forms"
|
|
40
40
|
],
|
|
41
41
|
"author": "New York State Design System Team",
|
|
42
|
-
"license": "MIT"
|
|
42
|
+
"license": "MIT",
|
|
43
|
+
"sideEffects": true
|
|
43
44
|
}
|