@nuralyui/modal 0.0.7 → 0.0.8
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/bundle.js +422 -6
- package/package.json +1 -1
package/bundle.js
CHANGED
|
@@ -1,26 +1,442 @@
|
|
|
1
|
-
import{css as
|
|
1
|
+
import{css as a,LitElement as o,nothing as t,html as e}from"lit";import{property as i,state as r,customElement as s}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
5
|
* SPDX-License-Identifier: MIT
|
|
6
|
-
*/var h,
|
|
6
|
+
*/var c,h,m,u;!function(a){a.Small="small",a.Medium="medium",a.Large="large",a.ExtraLarge="xl"}(c||(c={})),function(a){a.Center="center",a.Top="top",a.Bottom="bottom"}(h||(h={})),function(a){a.Fade="fade",a.Zoom="zoom",a.SlideUp="slide-up",a.SlideDown="slide-down",a.None="none"}(m||(m={})),function(a){a.Static="static",a.Closable="closable",a.None="none"}(u||(u={}));const p="",v=1e3,y=a=>Object.values(c).includes(a),f=a=>Object.values(h).includes(a),b=a=>Object.values(m).includes(a),g=a=>Object.values(u).includes(a),x={size:c.Medium,position:h.Center,animation:m.Fade,backdrop:u.Closable,closable:!0,draggable:!1,resizable:!1,fullscreen:!1,destroyOnClose:!1,zIndex:1e3},k={title:p,showCloseButton:!0,icon:p,draggable:!1},w={showCancelButton:!1,showOkButton:!1,cancelText:"Cancel",okText:"OK",okType:"primary"},z=a`
|
|
7
|
+
:host {
|
|
8
|
+
display: contents;
|
|
9
|
+
font-family: var(--nuraly-font-family);
|
|
10
|
+
|
|
11
|
+
/* Force CSS custom property inheritance to ensure theme switching works properly */
|
|
12
|
+
color: var(--nuraly-color-text);
|
|
13
|
+
background-color: var(--nuraly-color-background);
|
|
14
|
+
|
|
15
|
+
/* Ensure theme variables are properly inherited */
|
|
16
|
+
--modal-border-radius: var(--nuraly-border-radius-modal, 8px);
|
|
17
|
+
|
|
18
|
+
/* Ensure clean state transitions when theme changes */
|
|
19
|
+
* {
|
|
20
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Force re-evaluation of theme-dependent properties on theme change */
|
|
25
|
+
:host([data-theme]) {
|
|
26
|
+
color: inherit;
|
|
27
|
+
background-color: inherit;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Modal backdrop */
|
|
31
|
+
.modal-backdrop {
|
|
32
|
+
position: fixed;
|
|
33
|
+
top: 0;
|
|
34
|
+
left: 0;
|
|
35
|
+
right: 0;
|
|
36
|
+
bottom: 0;
|
|
37
|
+
background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));
|
|
38
|
+
z-index: var(--nuraly-z-modal-backdrop, 1000);
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));
|
|
43
|
+
backdrop-filter: var(--nuraly-modal-backdrop-filter, none);
|
|
44
|
+
|
|
45
|
+
&.modal-backdrop--hidden {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.modal-backdrop--position-top {
|
|
50
|
+
align-items: flex-start;
|
|
51
|
+
padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&.modal-backdrop--position-bottom {
|
|
55
|
+
align-items: flex-end;
|
|
56
|
+
padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Nested modals support */
|
|
61
|
+
.modal-backdrop {
|
|
62
|
+
/* Ensure each modal backdrop has its own stacking context */
|
|
63
|
+
z-index: var(--nuraly-z-modal-backdrop, 1000);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Nested modal backdrop styling */
|
|
67
|
+
.modal-backdrop + .modal-backdrop {
|
|
68
|
+
/* Subsequent modals get slightly darker backdrop */
|
|
69
|
+
background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Nested modal animation delay to avoid conflicts */
|
|
73
|
+
.modal-backdrop:not(:first-of-type) {
|
|
74
|
+
animation-delay: 0.1s;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Modal container */
|
|
78
|
+
.modal {
|
|
79
|
+
position: relative;
|
|
80
|
+
background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));
|
|
81
|
+
border-radius: var(--modal-border-radius);
|
|
82
|
+
box-shadow: var(--nuraly-shadow-modal,
|
|
83
|
+
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
84
|
+
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
85
|
+
0 9px 28px 8px rgba(0, 0, 0, 0.05)
|
|
86
|
+
);
|
|
87
|
+
border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));
|
|
88
|
+
max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
|
|
89
|
+
max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-direction: column;
|
|
92
|
+
outline: none;
|
|
93
|
+
|
|
94
|
+
&:focus {
|
|
95
|
+
outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
|
|
96
|
+
outline-offset: var(--nuraly-focus-outline-offset, 1px);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
/* Modal sizes */
|
|
102
|
+
.modal--size-small {
|
|
103
|
+
width: var(--nuraly-modal-width-small, 400px);
|
|
104
|
+
min-height: var(--nuraly-modal-min-height-small, 200px);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.modal--size-medium {
|
|
108
|
+
width: var(--nuraly-modal-width-medium, 600px);
|
|
109
|
+
min-height: var(--nuraly-modal-min-height-medium, 300px);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.modal--size-large {
|
|
113
|
+
width: var(--nuraly-modal-width-large, 800px);
|
|
114
|
+
min-height: var(--nuraly-modal-min-height-large, 400px);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.modal--size-xl {
|
|
118
|
+
width: var(--nuraly-modal-width-xl, 1000px);
|
|
119
|
+
min-height: var(--nuraly-modal-min-height-xl, 500px);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.modal--fullscreen {
|
|
123
|
+
width: 100vw;
|
|
124
|
+
height: 100vh;
|
|
125
|
+
max-width: 100vw;
|
|
126
|
+
max-height: 100vh;
|
|
127
|
+
border-radius: 0;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Modal header */
|
|
131
|
+
.modal-header {
|
|
132
|
+
padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
|
|
133
|
+
border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));
|
|
134
|
+
display: flex;
|
|
135
|
+
align-items: center;
|
|
136
|
+
justify-content: space-between;
|
|
137
|
+
min-height: var(--nuraly-modal-header-height);
|
|
138
|
+
flex-shrink: 0;
|
|
139
|
+
|
|
140
|
+
&.modal-header--draggable {
|
|
141
|
+
cursor: move;
|
|
142
|
+
user-select: none;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.modal-header-content {
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
gap: var(--nuraly-spacing-03, 0.5rem);
|
|
150
|
+
flex: 1;
|
|
151
|
+
min-width: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.modal-header-icon {
|
|
155
|
+
flex-shrink: 0;
|
|
156
|
+
width: var(--nuraly-modal-header-icon-size, 20px);
|
|
157
|
+
height: var(--nuraly-modal-header-icon-size, 20px);
|
|
158
|
+
color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.modal-title {
|
|
162
|
+
font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));
|
|
163
|
+
font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));
|
|
164
|
+
color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));
|
|
165
|
+
margin: 0;
|
|
166
|
+
line-height: var(--nuraly-line-height-02, 1.375);
|
|
167
|
+
overflow: hidden;
|
|
168
|
+
text-overflow: ellipsis;
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.modal-close-button {
|
|
173
|
+
flex-shrink: 0;
|
|
174
|
+
width: var(--nuraly-modal-close-size, 32px);
|
|
175
|
+
height: var(--nuraly-modal-close-size, 32px);
|
|
176
|
+
border: none;
|
|
177
|
+
background: transparent;
|
|
178
|
+
border-radius: var(--nuraly-border-radius-sm, 4px);
|
|
179
|
+
cursor: pointer;
|
|
180
|
+
display: flex;
|
|
181
|
+
align-items: center;
|
|
182
|
+
justify-content: center;
|
|
183
|
+
color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));
|
|
184
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
185
|
+
|
|
186
|
+
&:hover {
|
|
187
|
+
background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));
|
|
188
|
+
color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
&:focus {
|
|
192
|
+
outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
|
|
193
|
+
outline-offset: var(--nuraly-focus-outline-offset, 1px);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
&:active {
|
|
197
|
+
background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.modal-close-icon {
|
|
202
|
+
width: var(--nuraly-modal-close-icon-size, 16px);
|
|
203
|
+
height: var(--nuraly-modal-close-icon-size, 16px);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Carbon theme specific - sharp corners for close button */
|
|
207
|
+
:host([data-theme="carbon"]) .modal-close-button,
|
|
208
|
+
:host([data-theme="carbon-light"]) .modal-close-button,
|
|
209
|
+
:host([data-theme="carbon-dark"]) .modal-close-button {
|
|
210
|
+
border-radius: 0;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* Modal body */
|
|
214
|
+
.modal-body {
|
|
215
|
+
flex: 1;
|
|
216
|
+
padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
|
|
217
|
+
overflow-y: auto;
|
|
218
|
+
color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));
|
|
219
|
+
line-height: var(--nuraly-line-height-03, 1.5);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* Modal footer */
|
|
223
|
+
.modal-footer {
|
|
224
|
+
padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));
|
|
225
|
+
border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));
|
|
226
|
+
display: flex;
|
|
227
|
+
align-items: center;
|
|
228
|
+
justify-content: flex-end;
|
|
229
|
+
gap: var(--nuraly-spacing-03, 0.5rem);
|
|
230
|
+
min-height: var(--nuraly-modal-footer-height, 48px);
|
|
231
|
+
flex-shrink: 0;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* Animation keyframes */
|
|
235
|
+
@keyframes modalFadeIn {
|
|
236
|
+
from {
|
|
237
|
+
opacity: 0;
|
|
238
|
+
transform: scale(0.9);
|
|
239
|
+
}
|
|
240
|
+
to {
|
|
241
|
+
opacity: 1;
|
|
242
|
+
transform: scale(1);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
@keyframes modalZoomIn {
|
|
247
|
+
from {
|
|
248
|
+
opacity: 0;
|
|
249
|
+
transform: scale(0.7);
|
|
250
|
+
}
|
|
251
|
+
to {
|
|
252
|
+
opacity: 1;
|
|
253
|
+
transform: scale(1);
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
@keyframes modalSlideUp {
|
|
258
|
+
from {
|
|
259
|
+
opacity: 0;
|
|
260
|
+
transform: translateY(20px);
|
|
261
|
+
}
|
|
262
|
+
to {
|
|
263
|
+
opacity: 1;
|
|
264
|
+
transform: translateY(0);
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
@keyframes modalSlideDown {
|
|
269
|
+
from {
|
|
270
|
+
opacity: 0;
|
|
271
|
+
transform: translateY(-20px);
|
|
272
|
+
}
|
|
273
|
+
to {
|
|
274
|
+
opacity: 1;
|
|
275
|
+
transform: translateY(0);
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
@keyframes backdropFadeIn {
|
|
280
|
+
from {
|
|
281
|
+
opacity: 0;
|
|
282
|
+
}
|
|
283
|
+
to {
|
|
284
|
+
opacity: 1;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* Animation classes */
|
|
289
|
+
.modal-backdrop--animation-fade {
|
|
290
|
+
animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.modal--animation-fade {
|
|
294
|
+
animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.modal--animation-zoom {
|
|
298
|
+
animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.modal--animation-slide-up {
|
|
302
|
+
animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.modal--animation-slide-down {
|
|
306
|
+
animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* Dragging state */
|
|
310
|
+
.modal--dragging {
|
|
311
|
+
user-select: none;
|
|
312
|
+
cursor: move;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* Resizing handles (when resizable) */
|
|
316
|
+
.modal--resizable {
|
|
317
|
+
resize: both;
|
|
318
|
+
overflow: auto;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.resize-handle {
|
|
322
|
+
position: absolute;
|
|
323
|
+
bottom: 0;
|
|
324
|
+
right: 0;
|
|
325
|
+
width: 20px;
|
|
326
|
+
height: 20px;
|
|
327
|
+
cursor: se-resize;
|
|
328
|
+
background: linear-gradient(
|
|
329
|
+
-45deg,
|
|
330
|
+
transparent 40%,
|
|
331
|
+
var(--nuraly-color-border, #e0e0e0) 40%,
|
|
332
|
+
var(--nuraly-color-border, #e0e0e0) 60%,
|
|
333
|
+
transparent 60%
|
|
334
|
+
);
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
/* Responsive behavior */
|
|
338
|
+
@media (max-width: 768px) {
|
|
339
|
+
.modal-backdrop {
|
|
340
|
+
padding: var(--nuraly-spacing-02, 0.25rem);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.modal--size-small,
|
|
344
|
+
.modal--size-medium,
|
|
345
|
+
.modal--size-large,
|
|
346
|
+
.modal--size-xl {
|
|
347
|
+
width: 100%;
|
|
348
|
+
max-width: none;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.modal-header,
|
|
352
|
+
.modal-body,
|
|
353
|
+
.modal-footer {
|
|
354
|
+
padding-left: var(--nuraly-spacing-04, 0.75rem);
|
|
355
|
+
padding-right: var(--nuraly-spacing-04, 0.75rem);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/* Dark theme support through CSS custom properties */
|
|
360
|
+
@media (prefers-color-scheme: dark) {
|
|
361
|
+
:host(:not([data-theme])) {
|
|
362
|
+
--nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
`
|
|
7
366
|
/**
|
|
8
367
|
* @license
|
|
9
368
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
10
369
|
* SPDX-License-Identifier: MIT
|
|
11
|
-
*/;const
|
|
370
|
+
*/;const M=new class{constructor(){this.modalStack=[],this.baseZIndex=1e3,this.zIndexIncrement=10,this.bodyScrollDisabled=!1,this.originalBodyOverflow=""}openModal(a){const o=this.generateModalId(),t=this.baseZIndex+this.modalStack.length*this.zIndexIncrement,e={modal:a,previousFocus:document.activeElement,zIndex:t,id:o};return this.modalStack.push(e),1===this.modalStack.length&&this.disableBodyScroll(),this.updateModalZIndex(a,t),console.log(`Modal opened. Stack depth: ${this.modalStack.length}, Z-Index: ${t}`),t}closeModal(a){const o=this.modalStack.findIndex((o=>o.modal===a));if(-1===o)return void console.warn("Attempting to close a modal that is not in the stack");const t=this.modalStack[o];if(o<this.modalStack.length-1){this.modalStack.slice(o+1).forEach((a=>{a.modal&&"function"==typeof a.modal.closeModal&&a.modal.closeModal()}))}this.modalStack.splice(o),t.previousFocus instanceof HTMLElement&&setTimeout((()=>{t.previousFocus instanceof HTMLElement&&t.previousFocus.focus()}),100),0===this.modalStack.length&&this.restoreBodyScroll(),console.log(`Modal closed. Stack depth: ${this.modalStack.length}`)}getModalZIndex(a){const o=this.modalStack.find((o=>o.modal===a));return o?o.zIndex:this.baseZIndex}isTopModal(a){return 0!==this.modalStack.length&&this.modalStack[this.modalStack.length-1].modal===a}getStackDepth(){return this.modalStack.length}closeAllModals(){[...this.modalStack].reverse().forEach((a=>{a.modal&&"function"==typeof a.modal.closeModal&&a.modal.closeModal()}))}getOpenModalIds(){return this.modalStack.map((a=>a.id))}hasOpenModals(){return this.modalStack.length>0}generateModalId(){return`modal-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}updateModalZIndex(a,o){a&&a.style&&a.style.setProperty("--nuraly-z-modal-backdrop",o.toString())}disableBodyScroll(){this.bodyScrollDisabled||(this.originalBodyOverflow=document.body.style.overflow,document.body.style.overflow="hidden",this.bodyScrollDisabled=!0)}restoreBodyScroll(){this.bodyScrollDisabled&&(document.body.style.overflow=this.originalBodyOverflow,this.bodyScrollDisabled=!1)}handleEscapeKey(){if(0===this.modalStack.length)return!1;const a=this.modalStack[this.modalStack.length-1].modal;return!(!a||"function"!=typeof a.closeModal||!1===a.closable)&&(a.closeModal(),!0)}handleBackdropClick(a){return this.isTopModal(a)}};"undefined"!=typeof window&&(window.ModalManager=M)
|
|
12
371
|
/**
|
|
13
372
|
* @license
|
|
14
373
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
15
374
|
* SPDX-License-Identifier: MIT
|
|
16
|
-
*/;class
|
|
375
|
+
*/;class ${constructor(a){this.initialX=0,this.initialY=0,this.dragHandle=null,this.handleMouseDown=a=>{var o;if(!this.host.modalDraggable)return;a.preventDefault(),this.host.isDragging=!0,this.initialX=a.clientX-this.host.offsetX,this.initialY=a.clientY-this.host.offsetY;const t=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");t&&t.classList.add("modal--dragging")},this.handleMouseMove=a=>{var o;if(!this.host.isDragging||!this.host.modalDraggable)return;a.preventDefault();const t=a.clientX-this.initialX,e=a.clientY-this.initialY,i=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");if(i){const a=i.getBoundingClientRect(),o=window.innerWidth,r=window.innerHeight,s=-a.width/2,n=o-a.width/2,l=-a.height/2,d=r-a.height/2;this.host.offsetX=Math.max(s,Math.min(n,t)),this.host.offsetY=Math.max(l,Math.min(d,e)),i.style.transform=`translate(${this.host.offsetX}px, ${this.host.offsetY}px)`}this.host.requestUpdate()},this.handleMouseUp=()=>{var a;if(!this.host.isDragging)return;this.host.isDragging=!1;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");o&&o.classList.remove("modal--dragging"),this.host.requestUpdate()},this.host=a,this.host.addController(this)}hostConnected(){this.setupDragHandlers()}hostDisconnected(){this.cleanupDragHandlers()}setupDragHandlers(){requestAnimationFrame((()=>{var a;this.dragHandle=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal-header--draggable"),this.dragHandle&&this.host.modalDraggable&&(this.dragHandle.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))}))}cleanupDragHandlers(){this.dragHandle&&this.dragHandle.removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}resetPosition(){var a;this.host.offsetX=0,this.host.offsetY=0;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");o&&(o.style.transform="none"),this.host.requestUpdate()}}
|
|
17
376
|
/**
|
|
18
377
|
* @license
|
|
19
378
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
20
379
|
* SPDX-License-Identifier: MIT
|
|
21
|
-
*/class
|
|
380
|
+
*/class S{constructor(a){this.handleKeyDown=a=>{if(this.host.open)switch(a.key){case"Escape":if(this.host.closable){a.preventDefault(),a.stopPropagation();if(!M.handleEscapeKey()){const a=new CustomEvent("modal-escape",{bubbles:!0,cancelable:!0});this.host.dispatchEvent(a)&&this.host.closeModal()}}break;case"Tab":M.isTopModal(this.host)&&this.handleTabNavigation(a)}},this.host=a,this.host.addController(this)}hostConnected(){document.addEventListener("keydown",this.handleKeyDown)}hostDisconnected(){document.removeEventListener("keydown",this.handleKeyDown)}handleTabNavigation(a){var o;const t=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".modal");if(!t)return;const e=this.getFocusableElements(t);if(0===e.length)return;const i=e[0],r=e[e.length-1];a.shiftKey?document.activeElement===i&&(a.preventDefault(),r.focus()):document.activeElement===r&&(a.preventDefault(),i.focus())}getFocusableElements(a){const o=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]'].join(", ");return Array.from(a.querySelectorAll(o)).filter((a=>a.offsetWidth>0&&a.offsetHeight>0&&!a.hidden&&"hidden"!==getComputedStyle(a).visibility))}focusFirstElement(){var a;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(!o)return;const t=this.getFocusableElements(o);t.length>0?t[0].focus():o.focus()}focusLastElement(){var a;const o=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(!o)return;const t=this.getFocusableElements(o);t.length>0&&t[t.length-1].focus()}}
|
|
22
381
|
/**
|
|
23
382
|
* @license
|
|
24
383
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
25
384
|
* SPDX-License-Identifier: MIT
|
|
26
|
-
*/var
|
|
385
|
+
*/var C=function(a,o,t,e){for(var i,r=arguments.length,s=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,t):e,n=a.length-1;n>=0;n--)(i=a[n])&&(s=(r<3?i(s):r>3?i(o,t,s):i(o,t))||s);return r>3&&s&&Object.defineProperty(o,t,s),s};let E=class extends(d(o)){constructor(){super(...arguments),this.open=!1,this.size=c.Medium,this.position=h.Center,this.animation=m.Fade,this.backdrop=u.Closable,this.closable=!0,this.modalDraggable=!1,this.resizable=!1,this.fullscreen=!1,this.modalTitle=p,this.showCloseButton=!0,this.headerIcon=p,this.zIndex=1e3,this.width=p,this.height=p,this.isDragging=!1,this.offsetX=0,this.offsetY=0,this.animationState="closed",this.previousActiveElement=null,this.requiredComponents=["nr-icon","nr-button"],this.dragController=new $(this),this.keyboardController=new S(this),this.handleBackdropClick=a=>{this.backdrop===u.Closable&&a.target===a.currentTarget&&M.handleBackdropClick(this)&&this.closeModal()}}connectedCallback(){super.connectedCallback(),this.validateDependencies()}disconnectedCallback(){super.disconnectedCallback(),this.previousActiveElement instanceof HTMLElement&&this.previousActiveElement.focus()}willUpdate(a){super.willUpdate(a),a.has("open")&&(this.open?this.handleOpen():this.handleClose())}handleOpen(){const a=M.openModal(this);this.zIndex=a,this.animationState="opening",this.dispatchEvent(new CustomEvent("modal-open",{bubbles:!0,detail:{modal:this,stackDepth:M.getStackDepth()}})),this.updateComplete.then((()=>{this.startOpenAnimation()}))}startOpenAnimation(){var a,o;const t=null===(a=this.shadowRoot)||void 0===a?void 0:a.querySelector(".modal"),e=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(".modal-backdrop");if(!t||!e)return;const{modalKeyframes:i}=this.getAnimationKeyframes();t.animate(i,{duration:300,easing:"ease",fill:"forwards"}).addEventListener("finish",(()=>{this.animationState="open",M.isTopModal(this)&&this.keyboardController.focusFirstElement(),this.dispatchEvent(new CustomEvent("modal-after-open",{bubbles:!0,detail:{modal:this,stackDepth:M.getStackDepth()}}))}))}getAnimationKeyframes(){let a;switch(this.animation){case"fade":default:a=[{opacity:0,transform:"scale(0.9)"},{opacity:1,transform:"scale(1)"}];break;case"zoom":a=[{opacity:0,transform:"scale(0.7)"},{opacity:1,transform:"scale(1)"}];break;case"slide-up":a=[{opacity:0,transform:"translateY(20px)"},{opacity:1,transform:"translateY(0)"}];break;case"slide-down":a=[{opacity:0,transform:"translateY(-20px)"},{opacity:1,transform:"translateY(0)"}]}return{modalKeyframes:a,backdropKeyframes:[{opacity:0},{opacity:1}]}}handleClose(){this.animationState="closing",M.closeModal(this),this.dragController.resetPosition(),setTimeout((()=>{this.animationState="closed"}),300)}openModal(){this.open=!0}closeModal(){if(!this.closable)return;const a=new CustomEvent("modal-before-close",{bubbles:!0,cancelable:!0,detail:{modal:this,cancel:()=>a.preventDefault()}});this.dispatchEvent(a)&&(this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,detail:{modal:this}})))}getBackdropClasses(){return{"modal-backdrop":!0,"modal-backdrop--hidden":!this.open,[`modal-backdrop--position-${this.position}`]:!0}}getModalClasses(){return{modal:!0,[`modal--size-${this.size}`]:!this.fullscreen,"modal--fullscreen":this.fullscreen,[`modal--animation-${this.animation}`]:"opening"===this.animationState||"open"===this.animationState,"modal--dragging":this.isDragging,"modal--resizable":this.resizable}}getModalStyles(){const a={};return this.zIndex&&(a["--nuraly-z-modal-backdrop"]=this.zIndex.toString()),this.width&&(a.width=this.width),this.height&&(a.height=this.height),a}renderHeader(){const a=this.querySelector('[slot="header"]'),o=this.modalTitle||this.headerIcon;return a||o||this.showCloseButton?e`
|
|
386
|
+
<div class="modal-header ${this.modalDraggable?"modal-header--draggable":""}">
|
|
387
|
+
${a?e`
|
|
388
|
+
<div class="modal-header-content">
|
|
389
|
+
<slot name="header"></slot>
|
|
390
|
+
</div>
|
|
391
|
+
`:o?e`
|
|
392
|
+
<div class="modal-header-content">
|
|
393
|
+
${this.headerIcon?e`
|
|
394
|
+
<nr-icon class="modal-header-icon" name="${this.headerIcon}"></nr-icon>
|
|
395
|
+
`:t}
|
|
396
|
+
${this.modalTitle?e`
|
|
397
|
+
<h2 class="modal-title">${this.modalTitle}</h2>
|
|
398
|
+
`:t}
|
|
399
|
+
</div>
|
|
400
|
+
`:t}
|
|
401
|
+
|
|
402
|
+
${this.showCloseButton?e`
|
|
403
|
+
<button
|
|
404
|
+
class="modal-close-button"
|
|
405
|
+
@click=${this.closeModal}
|
|
406
|
+
aria-label="Close modal"
|
|
407
|
+
type="button">
|
|
408
|
+
<nr-icon class="modal-close-icon" name="close"></nr-icon>
|
|
409
|
+
</button>
|
|
410
|
+
`:t}
|
|
411
|
+
</div>
|
|
412
|
+
`:t}renderFooter(){return this.querySelector('[slot="footer"]')?e`
|
|
413
|
+
<div class="modal-footer">
|
|
414
|
+
<slot name="footer"></slot>
|
|
415
|
+
</div>
|
|
416
|
+
`:t}updated(){this.updateDataTheme()}updateDataTheme(){this.closest("[data-theme]")||this.setAttribute("data-theme",this.currentTheme)}render(){return this.open||"closed"!==this.animationState?e`
|
|
417
|
+
<div
|
|
418
|
+
class=${n(this.getBackdropClasses())}
|
|
419
|
+
@click=${this.handleBackdropClick}
|
|
420
|
+
style=${l(this.getModalStyles())}>
|
|
421
|
+
|
|
422
|
+
<div
|
|
423
|
+
class=${n(this.getModalClasses())}
|
|
424
|
+
role="dialog"
|
|
425
|
+
aria-modal="true"
|
|
426
|
+
aria-labelledby=${this.modalTitle?"modal-title":t}
|
|
427
|
+
tabindex="-1">
|
|
428
|
+
|
|
429
|
+
${this.renderHeader()}
|
|
430
|
+
|
|
431
|
+
<div class="modal-body">
|
|
432
|
+
<slot></slot>
|
|
433
|
+
</div>
|
|
434
|
+
|
|
435
|
+
${this.renderFooter()}
|
|
436
|
+
|
|
437
|
+
${this.resizable?e`
|
|
438
|
+
<div class="resize-handle"></div>
|
|
439
|
+
`:t}
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
`:t}};E.styles=z,C([i({type:Boolean,reflect:!0})],E.prototype,"open",void 0),C([i({type:String})],E.prototype,"size",void 0),C([i({type:String})],E.prototype,"position",void 0),C([i({type:String})],E.prototype,"animation",void 0),C([i({type:String})],E.prototype,"backdrop",void 0),C([i({type:Boolean})],E.prototype,"closable",void 0),C([i({type:Boolean})],E.prototype,"modalDraggable",void 0),C([i({type:Boolean})],E.prototype,"resizable",void 0),C([i({type:Boolean})],E.prototype,"fullscreen",void 0),C([i({type:String})],E.prototype,"modalTitle",void 0),C([i({type:Boolean,attribute:"show-close-button"})],E.prototype,"showCloseButton",void 0),C([i({type:String})],E.prototype,"headerIcon",void 0),C([i({type:Number})],E.prototype,"zIndex",void 0),C([i({type:String})],E.prototype,"width",void 0),C([i({type:String})],E.prototype,"height",void 0),C([r()],E.prototype,"isDragging",void 0),C([i({type:Number})],E.prototype,"offsetX",void 0),C([i({type:Number})],E.prototype,"offsetY",void 0),C([r()],E.prototype,"animationState",void 0),E=C([s("nr-modal")],E);export{x as DEFAULT_MODAL_CONFIG,w as DEFAULT_MODAL_FOOTER,k as DEFAULT_MODAL_HEADER,v as DEFAULT_Z_INDEX,p as EMPTY_STRING,m as ModalAnimation,u as ModalBackdrop,$ as ModalDragController,S as ModalKeyboardController,M as ModalManager,h as ModalPosition,c as ModalSize,E as NrModalElement,b as isModalAnimation,g as isModalBackdrop,f as isModalPosition,y as isModalSize};
|