@nectary/components 1.0.0 → 1.1.0
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/dialog/index.js +19 -15
- package/dialog/types.d.ts +14 -3
- package/package.json +1 -1
- package/theme/fonts.json +4 -3
package/dialog/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import '../icon';
|
|
|
3
3
|
import '../stop-events';
|
|
4
4
|
import '../title';
|
|
5
5
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar } from '../utils';
|
|
6
|
-
const templateHTML = '<style>:host{display:
|
|
6
|
+
const templateHTML = '<style>:host{display:block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
|
|
7
7
|
const template = document.createElement('template');
|
|
8
8
|
template.innerHTML = templateHTML;
|
|
9
9
|
defineCustomElement('sinch-dialog', class extends NectaryElement {
|
|
@@ -11,6 +11,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
|
|
|
11
11
|
#$dialog;
|
|
12
12
|
#$closeButton;
|
|
13
13
|
#$caption;
|
|
14
|
+
#controller = null;
|
|
14
15
|
#prevOverflowValue = '';
|
|
15
16
|
constructor() {
|
|
16
17
|
super();
|
|
@@ -24,19 +25,20 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
|
|
|
24
25
|
connectedCallback() {
|
|
25
26
|
super.connectedCallback();
|
|
26
27
|
this.setAttribute('role', 'dialog');
|
|
27
|
-
this
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
this.#controller = new AbortController();
|
|
29
|
+
const options = {
|
|
30
|
+
signal: this.#controller.signal
|
|
31
|
+
};
|
|
32
|
+
this.#$closeButton.addEventListener('click', this.#onCloseClick, options);
|
|
33
|
+
this.#$dialog.addEventListener('mousedown', this.#onBackdropClick, options);
|
|
34
|
+
this.#$dialog.addEventListener('cancel', this.#onCancel, options);
|
|
35
|
+
this.addEventListener('-close', this.#onCloseReactHandler, options);
|
|
31
36
|
updateAttribute(this.#$iconClose, 'name', getCssVar(this, '--sinch-dialog-icon-close'));
|
|
32
37
|
this.#setOpen(getBooleanAttribute(this, 'open'));
|
|
33
38
|
}
|
|
34
39
|
disconnectedCallback() {
|
|
35
40
|
super.disconnectedCallback();
|
|
36
|
-
this
|
|
37
|
-
this.#$dialog.removeEventListener('mousedown', this.#onBackdropClick);
|
|
38
|
-
this.#$dialog.removeEventListener('cancel', this.#onCancel);
|
|
39
|
-
this.removeEventListener('-close', this.#onCloseReactHandler);
|
|
41
|
+
this.#controller.abort();
|
|
40
42
|
this.#setOpen(false);
|
|
41
43
|
}
|
|
42
44
|
static get observedAttributes() {
|
|
@@ -71,10 +73,10 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
|
|
|
71
73
|
}
|
|
72
74
|
#onCancel = e => {
|
|
73
75
|
e.preventDefault();
|
|
74
|
-
this.#dispatchCloseEvent();
|
|
76
|
+
this.#dispatchCloseEvent('escape');
|
|
75
77
|
};
|
|
76
78
|
#onCloseClick = () => {
|
|
77
|
-
this.#dispatchCloseEvent();
|
|
79
|
+
this.#dispatchCloseEvent('close');
|
|
78
80
|
};
|
|
79
81
|
#onBackdropClick = e => {
|
|
80
82
|
if (e.target !== this.#$dialog) {
|
|
@@ -83,15 +85,17 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
|
|
|
83
85
|
const rect = this.dialogRect;
|
|
84
86
|
const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
|
|
85
87
|
if (!isInside) {
|
|
86
|
-
this.#dispatchCloseEvent();
|
|
88
|
+
this.#dispatchCloseEvent('backdrop');
|
|
87
89
|
}
|
|
88
90
|
};
|
|
89
91
|
#onCloseReactHandler = e => {
|
|
90
|
-
getReactEventHandler(this, 'onClose')?.();
|
|
92
|
+
getReactEventHandler(this, 'onClose')?.(e);
|
|
91
93
|
getReactEventHandler(this, 'on-close')?.(e);
|
|
92
94
|
};
|
|
93
|
-
#dispatchCloseEvent() {
|
|
94
|
-
this.dispatchEvent(new CustomEvent('-close'
|
|
95
|
+
#dispatchCloseEvent(detail) {
|
|
96
|
+
this.dispatchEvent(new CustomEvent('-close', {
|
|
97
|
+
detail
|
|
98
|
+
}));
|
|
95
99
|
}
|
|
96
100
|
#setOpen(shouldOpen) {
|
|
97
101
|
if (shouldOpen) {
|
package/dialog/types.d.ts
CHANGED
|
@@ -1,17 +1,28 @@
|
|
|
1
1
|
import type { TRect, TSinchElementReact } from '../types';
|
|
2
|
+
export type TSinchDialogCloseDetail = 'close' | 'escape' | 'backdrop';
|
|
2
3
|
export type TSinchDialogElement = HTMLElement & {
|
|
4
|
+
/** Dialog caption */
|
|
3
5
|
caption: string;
|
|
4
6
|
readonly dialogRect: TRect;
|
|
5
7
|
readonly closeButtonRect: TRect;
|
|
6
|
-
|
|
8
|
+
/** close event handler */
|
|
9
|
+
addEventListener(type: '-close', listener: (e: CustomEvent<TSinchDialogCloseDetail>) => void): void;
|
|
10
|
+
/** Dialog caption */
|
|
7
11
|
setAttribute(name: 'caption', value: string): void;
|
|
12
|
+
/** Close button label that is used for a11y */
|
|
8
13
|
setAttribute(name: 'close-aria-label', value: string): void;
|
|
9
14
|
};
|
|
10
15
|
export type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
|
|
16
|
+
/** Controls whether the dialog should be open */
|
|
11
17
|
open: boolean;
|
|
18
|
+
/** Dialog caption */
|
|
12
19
|
caption: string;
|
|
20
|
+
/** Label that is used for a11y */
|
|
13
21
|
'aria-label': string;
|
|
22
|
+
/** Close button label that is used for a11y */
|
|
14
23
|
'close-aria-label': string;
|
|
15
|
-
|
|
16
|
-
|
|
24
|
+
/** @deprecated close event handler */
|
|
25
|
+
onClose?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
|
|
26
|
+
/** close event handler */
|
|
27
|
+
'on-close'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
|
|
17
28
|
};
|
package/package.json
CHANGED
package/theme/fonts.json
CHANGED
|
@@ -77,12 +77,13 @@
|
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
|
-
"family": "Material Icons
|
|
80
|
+
"family": "Material Icons",
|
|
81
81
|
"weight": 400,
|
|
82
82
|
"style": "normal",
|
|
83
|
+
"display": "block",
|
|
83
84
|
"src": {
|
|
84
|
-
"
|
|
85
|
-
"
|
|
85
|
+
"local": "MaterialSymbolsRounded24pt-Regular",
|
|
86
|
+
"woff2": "https://fonts.gstatic.com/s/materialsymbolsrounded/v76/syl7-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvLgyidOK7BDB_Qb9vUdV6_gjDK-P3JuF_Zs-obHph2-jOcZTKPq8a9A5M.woff2"
|
|
86
87
|
}
|
|
87
88
|
}
|
|
88
89
|
]
|