@m3e/dialog 1.0.0-rc.2 → 1.0.0-rc.3
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/custom-elements.json +11 -40
- package/dist/src/DialogActionElement.d.ts +31 -0
- package/dist/src/DialogActionElement.d.ts.map +1 -0
- package/dist/src/DialogElement.d.ts +141 -0
- package/dist/src/DialogElement.d.ts.map +1 -0
- package/dist/src/DialogTriggerElement.d.ts +24 -0
- package/dist/src/DialogTriggerElement.d.ts.map +1 -0
- package/dist/src/index.d.ts +4 -0
- package/dist/src/index.d.ts.map +1 -0
- package/package.json +3 -3
|
@@ -446,27 +446,6 @@
|
|
|
446
446
|
}
|
|
447
447
|
}
|
|
448
448
|
]
|
|
449
|
-
},
|
|
450
|
-
{
|
|
451
|
-
"kind": "method",
|
|
452
|
-
"name": "dispatchEvent",
|
|
453
|
-
"return": {
|
|
454
|
-
"type": {
|
|
455
|
-
"text": "boolean"
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
"parameters": [
|
|
459
|
-
{
|
|
460
|
-
"name": "event",
|
|
461
|
-
"type": {
|
|
462
|
-
"text": "Event"
|
|
463
|
-
}
|
|
464
|
-
}
|
|
465
|
-
],
|
|
466
|
-
"inheritedFrom": {
|
|
467
|
-
"name": "EventAttribute",
|
|
468
|
-
"module": "../core/src/shared/mixins/EventAttribute.ts"
|
|
469
|
-
}
|
|
470
449
|
}
|
|
471
450
|
],
|
|
472
451
|
"events": [
|
|
@@ -1655,25 +1634,6 @@
|
|
|
1655
1634
|
"kind": "mixin",
|
|
1656
1635
|
"description": "Mixin that adds support for custom event attributes.",
|
|
1657
1636
|
"name": "EventAttribute",
|
|
1658
|
-
"members": [
|
|
1659
|
-
{
|
|
1660
|
-
"kind": "method",
|
|
1661
|
-
"name": "dispatchEvent",
|
|
1662
|
-
"return": {
|
|
1663
|
-
"type": {
|
|
1664
|
-
"text": "boolean"
|
|
1665
|
-
}
|
|
1666
|
-
},
|
|
1667
|
-
"parameters": [
|
|
1668
|
-
{
|
|
1669
|
-
"name": "event",
|
|
1670
|
-
"type": {
|
|
1671
|
-
"text": "Event"
|
|
1672
|
-
}
|
|
1673
|
-
}
|
|
1674
|
-
]
|
|
1675
|
-
}
|
|
1676
|
-
],
|
|
1677
1637
|
"parameters": [
|
|
1678
1638
|
{
|
|
1679
1639
|
"name": "base",
|
|
@@ -1971,6 +1931,17 @@
|
|
|
1971
1931
|
"description": "Mixin to augment an element with behavior used to submit a form.",
|
|
1972
1932
|
"name": "FormSubmitter",
|
|
1973
1933
|
"members": [
|
|
1934
|
+
{
|
|
1935
|
+
"kind": "field",
|
|
1936
|
+
"name": "formAssociated",
|
|
1937
|
+
"type": {
|
|
1938
|
+
"text": "boolean"
|
|
1939
|
+
},
|
|
1940
|
+
"static": true,
|
|
1941
|
+
"readonly": true,
|
|
1942
|
+
"default": "true",
|
|
1943
|
+
"description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
|
|
1944
|
+
},
|
|
1974
1945
|
{
|
|
1975
1946
|
"kind": "field",
|
|
1976
1947
|
"name": "name",
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement } from "lit";
|
|
2
|
+
declare const M3eDialogActionElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
|
|
3
|
+
/**
|
|
4
|
+
* An element, nested within a clickable element, used to close a parenting dialog.
|
|
5
|
+
* @tag m3e-dialog-action
|
|
6
|
+
*
|
|
7
|
+
* @attr return-value - The value to return from the dialog.
|
|
8
|
+
*/
|
|
9
|
+
export declare class M3eDialogActionElement extends M3eDialogActionElement_base {
|
|
10
|
+
#private;
|
|
11
|
+
/** The styles of the element. */
|
|
12
|
+
static styles: CSSResultGroup;
|
|
13
|
+
/**
|
|
14
|
+
* The value to return from the dialog.
|
|
15
|
+
* @default ""
|
|
16
|
+
*/
|
|
17
|
+
returnValue: string;
|
|
18
|
+
/** @inheritdoc */
|
|
19
|
+
connectedCallback(): void;
|
|
20
|
+
/** @inheritdoc */
|
|
21
|
+
disconnectedCallback(): void;
|
|
22
|
+
/** @inheritdoc */
|
|
23
|
+
protected render(): unknown;
|
|
24
|
+
}
|
|
25
|
+
declare global {
|
|
26
|
+
interface HTMLElementTagNameMap {
|
|
27
|
+
"m3e-dialog-action": M3eDialogActionElement;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=DialogActionElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogActionElement.d.ts","sourceRoot":"","sources":["../../src/DialogActionElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;GAKG;AACH,qBACa,sBAAuB,SAAQ,2BAA2B;;IACrE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAIpC;IAEF;;;OAGG;IACsC,WAAW,SAAM;IAS1D,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement } from "lit";
|
|
2
|
+
declare const M3eDialogElement_base: typeof LitElement;
|
|
3
|
+
/**
|
|
4
|
+
* A dialog that provides important prompts in a user flow.
|
|
5
|
+
*
|
|
6
|
+
* @description
|
|
7
|
+
* The `m3e-dialog` component presents important prompts, alerts, and actions in user flows.
|
|
8
|
+
* Designed according to Material 3 principles, it supports custom header, content, and
|
|
9
|
+
* close icon slots, ARIA accessibility, focus management, and theming via CSS custom properties.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```html
|
|
13
|
+
* <m3e-button variant="filled">
|
|
14
|
+
* <m3e-dialog-trigger for="dlg">Open Dialog</m3e-dialog-trigger>
|
|
15
|
+
* </m3e-button>
|
|
16
|
+
* <m3e-dialog id="dlg" dismissible onclosed="console.log(this.returnValue)">
|
|
17
|
+
* <span slot="header">Dialog Title</span>
|
|
18
|
+
* Dialog content goes here.
|
|
19
|
+
* <div slot="actions" end>
|
|
20
|
+
* <m3e-button autofocus><m3e-dialog-action return-value="ok">Close</m3e-dialog-action></m3e-button>
|
|
21
|
+
* </div>
|
|
22
|
+
* </m3e-dialog>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @tag m3e-dialog
|
|
26
|
+
*
|
|
27
|
+
* @slot - Renders the content of the dialog.
|
|
28
|
+
* @slot header - Renders the header of the dialog.
|
|
29
|
+
* @slot actions - Renders the actions of the dialog.
|
|
30
|
+
* @slot close-icon - Renders the icon of the button used to close the dialog.
|
|
31
|
+
*
|
|
32
|
+
* @attr alert - Whether the dialog is an alert.
|
|
33
|
+
* @attr close-label - The accessible label given to the button used to dismiss the dialog.
|
|
34
|
+
* @attr disable-close -Whether users cannot click the backdrop or press escape to dismiss the dialog.
|
|
35
|
+
* @attr dismissible - Whether a button is presented that can be used to close the dialog.
|
|
36
|
+
* @attr no-focus-trap - Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.
|
|
37
|
+
* @attr open - Whether the dialog is open.
|
|
38
|
+
*
|
|
39
|
+
* @fires opening - Emitted when the dialog begins to open.
|
|
40
|
+
* @fires opened - Emitted when the dialog has opened.
|
|
41
|
+
* @fires cancel - Emitted when the dialog is cancelled.
|
|
42
|
+
* @fires closing - Emitted when the dialog begins to close.
|
|
43
|
+
* @fires closed - Emitted when the dialog has closed.
|
|
44
|
+
*
|
|
45
|
+
* @cssprop --m3e-dialog-shape - Border radius of the dialog container.
|
|
46
|
+
* @cssprop --m3e-dialog-min-width - Minimum width of the dialog.
|
|
47
|
+
* @cssprop --m3e-dialog-max-width - Maximum width of the dialog.
|
|
48
|
+
* @cssprop --m3e-dialog-color - Foreground color of the dialog.
|
|
49
|
+
* @cssprop --m3e-dialog-container-color - Background color of the dialog container.
|
|
50
|
+
* @cssprop --m3e-dialog-scrim-color - Color of the scrim (backdrop overlay).
|
|
51
|
+
* @cssprop --m3e-dialog-scrim-opacity - Opacity of the scrim when open.
|
|
52
|
+
* @cssprop --m3e-dialog-header-container-color - Background color of the dialog header.
|
|
53
|
+
* @cssprop --m3e-dialog-header-color - Foreground color of the dialog header.
|
|
54
|
+
* @cssprop --m3e-dialog-header-font-size - Font size for the dialog header.
|
|
55
|
+
* @cssprop --m3e-dialog-header-font-weight - Font weight for the dialog header.
|
|
56
|
+
* @cssprop --m3e-dialog-header-line-height - Line height for the dialog header.
|
|
57
|
+
* @cssprop --m3e-dialog-header-tracking - Letter spacing for the dialog header.
|
|
58
|
+
* @cssprop --m3e-dialog-content-color - Foreground color of the dialog content.
|
|
59
|
+
* @cssprop --m3e-dialog-content-font-size - Font size for the dialog content.
|
|
60
|
+
* @cssprop --m3e-dialog-content-font-weight - Font weight for the dialog content.
|
|
61
|
+
* @cssprop --m3e-dialog-content-line-height - Line height for the dialog content.
|
|
62
|
+
* @cssprop --m3e-dialog-content-tracking - Letter spacing for the dialog content.
|
|
63
|
+
*/
|
|
64
|
+
export declare class M3eDialogElement extends M3eDialogElement_base {
|
|
65
|
+
#private;
|
|
66
|
+
/** The styles of the element. */
|
|
67
|
+
static styles: CSSResultGroup;
|
|
68
|
+
/** @private */ private static __nextId;
|
|
69
|
+
/** @private */ private _hasActions;
|
|
70
|
+
/** @private */ private readonly _base;
|
|
71
|
+
/** @private */ private readonly _content;
|
|
72
|
+
/**
|
|
73
|
+
* Whether the dialog is an alert.
|
|
74
|
+
* @default false
|
|
75
|
+
*/
|
|
76
|
+
alert: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Whether the dialog is open.
|
|
79
|
+
* @default false
|
|
80
|
+
*/
|
|
81
|
+
get open(): boolean;
|
|
82
|
+
set open(value: boolean);
|
|
83
|
+
/**
|
|
84
|
+
* Whether a button is presented that can be used to close the dialog.
|
|
85
|
+
* @default false
|
|
86
|
+
*/
|
|
87
|
+
dismissible: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Whether users cannot click the backdrop or press ESC to dismiss the dialog.
|
|
90
|
+
* @default false
|
|
91
|
+
*/
|
|
92
|
+
disableClose: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Whether to disable focus trapping, which keeps keyboard `Tab` navigation within the dialog.
|
|
95
|
+
* @default false
|
|
96
|
+
*/
|
|
97
|
+
noFocusTrap: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* The accessible label given to the button used to dismiss the dialog.
|
|
100
|
+
* @default "Close"
|
|
101
|
+
*/
|
|
102
|
+
closeLabel: string;
|
|
103
|
+
/**
|
|
104
|
+
* The return value of the dialog.
|
|
105
|
+
* @default ""
|
|
106
|
+
*/
|
|
107
|
+
returnValue: string;
|
|
108
|
+
/**
|
|
109
|
+
* Asynchronously opens the dialog.
|
|
110
|
+
* @returns {Promise<void>} A `Promise` that resolves when the dialog is open.
|
|
111
|
+
*/
|
|
112
|
+
show(): Promise<void>;
|
|
113
|
+
/**
|
|
114
|
+
* Asynchronously closes the dialog.
|
|
115
|
+
* @param {string} returnValue The value to return.
|
|
116
|
+
* @returns {Promise<void>} A `Promise` that resolves when the dialog is closed.
|
|
117
|
+
*/
|
|
118
|
+
hide(returnValue?: string): Promise<void>;
|
|
119
|
+
/** @inheritdoc */
|
|
120
|
+
protected render(): unknown;
|
|
121
|
+
}
|
|
122
|
+
interface M3eDialogElementEventMap extends HTMLElementEventMap {
|
|
123
|
+
opening: Event;
|
|
124
|
+
opened: Event;
|
|
125
|
+
closing: Event;
|
|
126
|
+
closed: Event;
|
|
127
|
+
cancel: Event;
|
|
128
|
+
}
|
|
129
|
+
export interface M3eDialogElement {
|
|
130
|
+
addEventListener<K extends keyof M3eDialogElementEventMap>(type: K, listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
|
|
131
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
132
|
+
removeEventListener<K extends keyof M3eDialogElementEventMap>(type: K, listener: (this: M3eDialogElement, ev: M3eDialogElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
|
|
133
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
134
|
+
}
|
|
135
|
+
declare global {
|
|
136
|
+
interface HTMLElementTagNameMap {
|
|
137
|
+
"m3e-dialog": M3eDialogElement;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
export {};
|
|
141
|
+
//# sourceMappingURL=DialogElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogElement.d.ts","sourceRoot":"","sources":["../../src/DialogElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAsB,MAAM,KAAK,CAAC;;AAOhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,qBACa,gBAAiB,SAAQ,qBAA8E;;IAClH,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA8IpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAK5C,eAAe,CAAU,OAAO,CAAC,WAAW,CAAS;IACrD,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAqB;IAC3E,eAAe,CAAoB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqB;IAEjF;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;OAGG;IACH,IAAgD,IAAI,IAGpC,OAAO,CADtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAQtB;IAED;;;OAGG;IAC0B,WAAW,UAAS;IAEjD;;;OAGG;IACsD,YAAY,UAAS;IAE9E;;;OAGG;IACsD,WAAW,UAAS;IAE7E;;;OAGG;IACqC,UAAU,SAAW;IAE7D;;;OAGG;IACH,WAAW,SAAM;IAEjB;;;OAGG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA6B3B;;;;OAIG;IACG,IAAI,CAAC,WAAW,GAAE,MAAyB,GAAG,OAAO,CAAC,IAAI,CAAC;IA0BjE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAiFrC;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EACvD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement } from "lit";
|
|
2
|
+
declare const M3eDialogTriggerElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
|
|
3
|
+
/**
|
|
4
|
+
* An element, nested within a clickable element, used to open a dialog.
|
|
5
|
+
* @tag m3e-dialog-trigger
|
|
6
|
+
*/
|
|
7
|
+
export declare class M3eDialogTriggerElement extends M3eDialogTriggerElement_base {
|
|
8
|
+
#private;
|
|
9
|
+
/** The styles of the element. */
|
|
10
|
+
static styles: CSSResultGroup;
|
|
11
|
+
/** @inheritdoc */
|
|
12
|
+
connectedCallback(): void;
|
|
13
|
+
/** @inheritdoc */
|
|
14
|
+
disconnectedCallback(): void;
|
|
15
|
+
/** @inheritdoc */
|
|
16
|
+
protected render(): unknown;
|
|
17
|
+
}
|
|
18
|
+
declare global {
|
|
19
|
+
interface HTMLElementTagNameMap {
|
|
20
|
+
"m3e-dialog-trigger": M3eDialogTriggerElement;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
export {};
|
|
24
|
+
//# sourceMappingURL=DialogTriggerElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogTriggerElement.d.ts","sourceRoot":"","sources":["../../src/DialogTriggerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAO5D;;;GAGG;AACH,qBACa,uBAAwB,SAAQ,4BAAoC;;IAC/E,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAIpC;IASF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3e/dialog",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.3",
|
|
4
4
|
"description": "Dialog for M3E",
|
|
5
5
|
"author": "matraic <matraic@yahoo.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"clean": "rimraf dist"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
-
"@m3e/core": "1.0.0-rc.
|
|
31
|
-
"@m3e/icon-button": "1.0.0-rc.
|
|
30
|
+
"@m3e/core": "1.0.0-rc.3",
|
|
31
|
+
"@m3e/icon-button": "1.0.0-rc.3",
|
|
32
32
|
"lit": "^3.3.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|