@nuralyui/modal 0.0.7 → 0.0.9
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/index.js.map +1 -1
- package/modal-manager.js +0 -1
- package/modal-manager.js.map +1 -1
- package/modal.component.d.ts +3 -3
- package/modal.component.js +45 -29
- package/modal.component.js.map +1 -1
- package/modal.style.js.map +1 -1
- package/modal.types.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +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),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 C{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 $=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 C(this),this.keyboardController=new S(this),this.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,composed:!0,detail:{modal: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}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=${a=>{a.stopPropagation(),this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,composed:!0,detail:{modal:this}}))}}
|
|
406
|
+
aria-label="Close modal"
|
|
407
|
+
type="button">
|
|
408
|
+
<nr-icon class="modal-close-icon" name="x"></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,$([i({type:Boolean,reflect:!0})],E.prototype,"open",void 0),$([i({type:String})],E.prototype,"size",void 0),$([i({type:String})],E.prototype,"position",void 0),$([i({type:String})],E.prototype,"animation",void 0),$([i({type:String})],E.prototype,"backdrop",void 0),$([i({type:Boolean})],E.prototype,"closable",void 0),$([i({type:Boolean})],E.prototype,"modalDraggable",void 0),$([i({type:Boolean})],E.prototype,"resizable",void 0),$([i({type:Boolean})],E.prototype,"fullscreen",void 0),$([i({type:String})],E.prototype,"modalTitle",void 0),$([i({type:Boolean,attribute:"show-close-button"})],E.prototype,"showCloseButton",void 0),$([i({type:String})],E.prototype,"headerIcon",void 0),$([i({type:Number})],E.prototype,"zIndex",void 0),$([i({type:String})],E.prototype,"width",void 0),$([i({type:String})],E.prototype,"height",void 0),$([r()],E.prototype,"isDragging",void 0),$([i({type:Number})],E.prototype,"offsetX",void 0),$([i({type:Number})],E.prototype,"offsetY",void 0),$([r()],E.prototype,"animationState",void 0),E=$([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,C 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};
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './modal.component.js';\nexport * from './modal.types.js';\nexport * from './modal-manager.js';\nexport * from './controllers/index.js';\n"]}
|
package/modal-manager.js
CHANGED
package/modal-manager.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../../src/components/modal/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Modal stack item interface\n */\nexport interface ModalStackItem {\n modal: any; // The modal element\n previousFocus: Element | null; // The element that had focus before this modal\n zIndex: number; // The z-index for this modal\n id: string; // Unique identifier\n}\n\n/**\n * Modal Manager - Singleton class to handle nested modals\n * Manages the modal stack, z-index allocation, and focus management\n */\nclass ModalManagerClass {\n private modalStack: ModalStackItem[] = [];\n private baseZIndex = 1000;\n private zIndexIncrement = 10;\n private bodyScrollDisabled = false;\n private originalBodyOverflow = '';\n\n /**\n * Opens a modal and adds it to the stack\n */\n openModal(modal: any): number {\n const id = this.generateModalId();\n const zIndex = this.baseZIndex + (this.modalStack.length * this.zIndexIncrement);\n \n // Store the currently focused element\n const previousFocus = document.activeElement;\n \n // Add to stack\n const stackItem: ModalStackItem = {\n modal,\n previousFocus,\n zIndex,\n id\n };\n \n this.modalStack.push(stackItem);\n \n // Disable body scroll for the first modal\n if (this.modalStack.length === 1) {\n this.disableBodyScroll();\n }\n \n // Update modal z-index\n this.updateModalZIndex(modal, zIndex);\n \n console.log(`Modal opened. Stack depth: ${this.modalStack.length}, Z-Index: ${zIndex}`);\n \n return zIndex;\n }\n\n /**\n * Closes a modal and removes it from the stack\n */\n closeModal(modal: any): void {\n const index = this.modalStack.findIndex(item => item.modal === modal);\n \n if (index === -1) {\n console.warn('Attempting to close a modal that is not in the stack');\n return;\n }\n \n const stackItem = this.modalStack[index];\n \n // If this is not the top modal, close all modals above it first\n if (index < this.modalStack.length - 1) {\n const modalsToClose = this.modalStack.slice(index + 1);\n modalsToClose.forEach(item => {\n if (item.modal && typeof item.modal.closeModal === 'function') {\n item.modal.closeModal();\n }\n });\n }\n \n // Remove from stack\n this.modalStack.splice(index);\n \n // Restore focus to the previous element\n if (stackItem.previousFocus instanceof HTMLElement) {\n // Use setTimeout to ensure the modal DOM changes are complete\n setTimeout(() => {\n if (stackItem.previousFocus instanceof HTMLElement) {\n stackItem.previousFocus.focus();\n }\n }, 100);\n }\n \n // If this was the last modal, restore body scroll\n if (this.modalStack.length === 0) {\n this.restoreBodyScroll();\n }\n \n console.log(`Modal closed. Stack depth: ${this.modalStack.length}`);\n }\n\n /**\n * Gets the current z-index for a modal\n */\n getModalZIndex(modal: any): number {\n const stackItem = this.modalStack.find(item => item.modal === modal);\n return stackItem ? stackItem.zIndex : this.baseZIndex;\n }\n\n /**\n * Checks if a modal is the top modal in the stack\n */\n isTopModal(modal: any): boolean {\n if (this.modalStack.length === 0) return false;\n return this.modalStack[this.modalStack.length - 1].modal === modal;\n }\n\n /**\n * Gets the number of open modals\n */\n getStackDepth(): number {\n return this.modalStack.length;\n }\n\n /**\n * Closes all modals\n */\n closeAllModals(): void {\n // Close from top to bottom to maintain proper order\n const modalsToClose = [...this.modalStack].reverse();\n modalsToClose.forEach(item => {\n if (item.modal && typeof item.modal.closeModal === 'function') {\n item.modal.closeModal();\n }\n });\n }\n\n /**\n * Gets all open modal IDs\n */\n getOpenModalIds(): string[] {\n return this.modalStack.map(item => item.id);\n }\n\n /**\n * Checks if any modals are open\n */\n hasOpenModals(): boolean {\n return this.modalStack.length > 0;\n }\n\n private generateModalId(): string {\n return `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n }\n\n private updateModalZIndex(modal: any, zIndex: number): void {\n if (modal && modal.style) {\n modal.style.setProperty('--nuraly-z-modal-backdrop', zIndex.toString());\n }\n }\n\n private disableBodyScroll(): void {\n if (!this.bodyScrollDisabled) {\n this.originalBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n this.bodyScrollDisabled = true;\n }\n }\n\n private restoreBodyScroll(): void {\n if (this.bodyScrollDisabled) {\n document.body.style.overflow = this.originalBodyOverflow;\n this.bodyScrollDisabled = false;\n }\n }\n\n /**\n * Handle Escape key for nested modals - only close the top modal\n */\n handleEscapeKey(): boolean {\n if (this.modalStack.length === 0) return false;\n \n const topModal = this.modalStack[this.modalStack.length - 1].modal;\n if (topModal && typeof topModal.closeModal === 'function' && topModal.closable !== false) {\n topModal.closeModal();\n return true;\n }\n \n return false;\n }\n\n /**\n * Handle backdrop clicks - only close if it's the top modal\n */\n handleBackdropClick(modal: any): boolean {\n return this.isTopModal(modal);\n }\n}\n\n// Export singleton instance\nexport const ModalManager = new ModalManagerClass();\n\n// Make it available globally for debugging\nif (typeof window !== 'undefined') {\n (window as any).ModalManager = ModalManager;\n}"]}
|
|
1
|
+
{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../../../src/components/modal/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Modal stack item interface\n */\nexport interface ModalStackItem {\n modal: any; // The modal element\n previousFocus: Element | null; // The element that had focus before this modal\n zIndex: number; // The z-index for this modal\n id: string; // Unique identifier\n}\n\n/**\n * Modal Manager - Singleton class to handle nested modals\n * Manages the modal stack, z-index allocation, and focus management\n */\nclass ModalManagerClass {\n private modalStack: ModalStackItem[] = [];\n private baseZIndex = 1000;\n private zIndexIncrement = 10;\n private bodyScrollDisabled = false;\n private originalBodyOverflow = '';\n\n /**\n * Opens a modal and adds it to the stack\n */\n openModal(modal: any): number {\n const id = this.generateModalId();\n const zIndex = this.baseZIndex + (this.modalStack.length * this.zIndexIncrement);\n \n // Store the currently focused element\n const previousFocus = document.activeElement;\n \n // Add to stack\n const stackItem: ModalStackItem = {\n modal,\n previousFocus,\n zIndex,\n id\n };\n \n this.modalStack.push(stackItem);\n \n // Disable body scroll for the first modal\n if (this.modalStack.length === 1) {\n this.disableBodyScroll();\n }\n \n // Update modal z-index\n this.updateModalZIndex(modal, zIndex);\n \n return zIndex;\n }\n\n /**\n * Closes a modal and removes it from the stack\n */\n closeModal(modal: any): void {\n const index = this.modalStack.findIndex(item => item.modal === modal);\n \n if (index === -1) {\n console.warn('Attempting to close a modal that is not in the stack');\n return;\n }\n \n const stackItem = this.modalStack[index];\n \n // If this is not the top modal, close all modals above it first\n if (index < this.modalStack.length - 1) {\n const modalsToClose = this.modalStack.slice(index + 1);\n modalsToClose.forEach(item => {\n if (item.modal && typeof item.modal.closeModal === 'function') {\n item.modal.closeModal();\n }\n });\n }\n \n // Remove from stack\n this.modalStack.splice(index);\n \n // Restore focus to the previous element\n if (stackItem.previousFocus instanceof HTMLElement) {\n // Use setTimeout to ensure the modal DOM changes are complete\n setTimeout(() => {\n if (stackItem.previousFocus instanceof HTMLElement) {\n stackItem.previousFocus.focus();\n }\n }, 100);\n }\n \n // If this was the last modal, restore body scroll\n if (this.modalStack.length === 0) {\n this.restoreBodyScroll();\n }\n \n console.log(`Modal closed. Stack depth: ${this.modalStack.length}`);\n }\n\n /**\n * Gets the current z-index for a modal\n */\n getModalZIndex(modal: any): number {\n const stackItem = this.modalStack.find(item => item.modal === modal);\n return stackItem ? stackItem.zIndex : this.baseZIndex;\n }\n\n /**\n * Checks if a modal is the top modal in the stack\n */\n isTopModal(modal: any): boolean {\n if (this.modalStack.length === 0) return false;\n return this.modalStack[this.modalStack.length - 1].modal === modal;\n }\n\n /**\n * Gets the number of open modals\n */\n getStackDepth(): number {\n return this.modalStack.length;\n }\n\n /**\n * Closes all modals\n */\n closeAllModals(): void {\n // Close from top to bottom to maintain proper order\n const modalsToClose = [...this.modalStack].reverse();\n modalsToClose.forEach(item => {\n if (item.modal && typeof item.modal.closeModal === 'function') {\n item.modal.closeModal();\n }\n });\n }\n\n /**\n * Gets all open modal IDs\n */\n getOpenModalIds(): string[] {\n return this.modalStack.map(item => item.id);\n }\n\n /**\n * Checks if any modals are open\n */\n hasOpenModals(): boolean {\n return this.modalStack.length > 0;\n }\n\n private generateModalId(): string {\n return `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n }\n\n private updateModalZIndex(modal: any, zIndex: number): void {\n if (modal && modal.style) {\n modal.style.setProperty('--nuraly-z-modal-backdrop', zIndex.toString());\n }\n }\n\n private disableBodyScroll(): void {\n if (!this.bodyScrollDisabled) {\n this.originalBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n this.bodyScrollDisabled = true;\n }\n }\n\n private restoreBodyScroll(): void {\n if (this.bodyScrollDisabled) {\n document.body.style.overflow = this.originalBodyOverflow;\n this.bodyScrollDisabled = false;\n }\n }\n\n /**\n * Handle Escape key for nested modals - only close the top modal\n */\n handleEscapeKey(): boolean {\n if (this.modalStack.length === 0) return false;\n \n const topModal = this.modalStack[this.modalStack.length - 1].modal;\n if (topModal && typeof topModal.closeModal === 'function' && topModal.closable !== false) {\n topModal.closeModal();\n return true;\n }\n \n return false;\n }\n\n /**\n * Handle backdrop clicks - only close if it's the top modal\n */\n handleBackdropClick(modal: any): boolean {\n return this.isTopModal(modal);\n }\n}\n\n// Export singleton instance\nexport const ModalManager = new ModalManagerClass();\n\n// Make it available globally for debugging\nif (typeof window !== 'undefined') {\n (window as any).ModalManager = ModalManager;\n}"]}
|
package/modal.component.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
4
|
* SPDX-License-Identifier: MIT
|
|
5
5
|
*/
|
|
6
|
-
import { LitElement, nothing, PropertyValues } from 'lit';
|
|
6
|
+
import { LitElement, nothing, type PropertyValues } from 'lit';
|
|
7
7
|
import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop } from './modal.types.js';
|
|
8
8
|
import { ModalDragHost, ModalKeyboardHost } from './controllers/index.js';
|
|
9
9
|
declare const NrModalElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
@@ -106,7 +106,7 @@ export declare class NrModalElement extends NrModalElement_base implements Modal
|
|
|
106
106
|
/**
|
|
107
107
|
* Closes the modal
|
|
108
108
|
*/
|
|
109
|
-
closeModal()
|
|
109
|
+
closeModal: () => void;
|
|
110
110
|
private handleBackdropClick;
|
|
111
111
|
private getBackdropClasses;
|
|
112
112
|
private getModalClasses;
|
|
@@ -115,7 +115,7 @@ export declare class NrModalElement extends NrModalElement_base implements Modal
|
|
|
115
115
|
private renderFooter;
|
|
116
116
|
updated(): void;
|
|
117
117
|
private updateDataTheme;
|
|
118
|
-
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
118
|
+
render(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
119
119
|
}
|
|
120
120
|
export {};
|
|
121
121
|
//# sourceMappingURL=modal.component.d.ts.map
|
package/modal.component.js
CHANGED
|
@@ -106,6 +106,33 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
|
|
|
106
106
|
// Controllers
|
|
107
107
|
this.dragController = new ModalDragController(this);
|
|
108
108
|
this.keyboardController = new ModalKeyboardController(this);
|
|
109
|
+
/**
|
|
110
|
+
* Closes the modal
|
|
111
|
+
*/
|
|
112
|
+
this.closeModal = () => {
|
|
113
|
+
if (!this.closable)
|
|
114
|
+
return;
|
|
115
|
+
// Dispatch before close event (cancelable)
|
|
116
|
+
const beforeCloseEvent = new CustomEvent('modal-before-close', {
|
|
117
|
+
bubbles: true,
|
|
118
|
+
cancelable: true,
|
|
119
|
+
detail: {
|
|
120
|
+
modal: this,
|
|
121
|
+
cancel: () => beforeCloseEvent.preventDefault()
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
const dispatched = this.dispatchEvent(beforeCloseEvent);
|
|
125
|
+
// Only close if event wasn't cancelled
|
|
126
|
+
if (dispatched) {
|
|
127
|
+
this.open = false;
|
|
128
|
+
// Dispatch close event
|
|
129
|
+
this.dispatchEvent(new CustomEvent('modal-close', {
|
|
130
|
+
bubbles: true,
|
|
131
|
+
composed: true,
|
|
132
|
+
detail: { modal: this }
|
|
133
|
+
}));
|
|
134
|
+
}
|
|
135
|
+
};
|
|
109
136
|
this.handleBackdropClick = (event) => {
|
|
110
137
|
// Only allow backdrop close if this is the top modal and backdrop is closable
|
|
111
138
|
if (this.backdrop === ModalBackdrop.Closable &&
|
|
@@ -170,6 +197,13 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
|
|
|
170
197
|
// When animation completes
|
|
171
198
|
modalAnimation.addEventListener('finish', () => {
|
|
172
199
|
this.animationState = 'open';
|
|
200
|
+
// Clear the animation's fill-forward effect to prevent transform from creating
|
|
201
|
+
// a containing block for fixed-positioned descendants (e.g., dropdowns)
|
|
202
|
+
// commitStyles() persists final state, then cancel() removes animation effect
|
|
203
|
+
modalAnimation.commitStyles();
|
|
204
|
+
modalAnimation.cancel();
|
|
205
|
+
// Now clear the transform that was committed
|
|
206
|
+
modalElement.style.transform = '';
|
|
173
207
|
// Only focus if this is the top modal
|
|
174
208
|
if (ModalManager.isTopModal(this)) {
|
|
175
209
|
this.keyboardController.focusFirstElement();
|
|
@@ -237,32 +271,6 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
|
|
|
237
271
|
openModal() {
|
|
238
272
|
this.open = true;
|
|
239
273
|
}
|
|
240
|
-
/**
|
|
241
|
-
* Closes the modal
|
|
242
|
-
*/
|
|
243
|
-
closeModal() {
|
|
244
|
-
if (!this.closable)
|
|
245
|
-
return;
|
|
246
|
-
// Dispatch before close event (cancelable)
|
|
247
|
-
const beforeCloseEvent = new CustomEvent('modal-before-close', {
|
|
248
|
-
bubbles: true,
|
|
249
|
-
cancelable: true,
|
|
250
|
-
detail: {
|
|
251
|
-
modal: this,
|
|
252
|
-
cancel: () => beforeCloseEvent.preventDefault()
|
|
253
|
-
}
|
|
254
|
-
});
|
|
255
|
-
const dispatched = this.dispatchEvent(beforeCloseEvent);
|
|
256
|
-
// Only close if event wasn't cancelled
|
|
257
|
-
if (dispatched) {
|
|
258
|
-
this.open = false;
|
|
259
|
-
// Dispatch close event
|
|
260
|
-
this.dispatchEvent(new CustomEvent('modal-close', {
|
|
261
|
-
bubbles: true,
|
|
262
|
-
detail: { modal: this }
|
|
263
|
-
}));
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
274
|
getBackdropClasses() {
|
|
267
275
|
return {
|
|
268
276
|
'modal-backdrop': true,
|
|
@@ -317,12 +325,20 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
|
|
|
317
325
|
` : nothing}
|
|
318
326
|
|
|
319
327
|
${this.showCloseButton ? html `
|
|
320
|
-
<button
|
|
328
|
+
<button
|
|
321
329
|
class="modal-close-button"
|
|
322
|
-
@click=${
|
|
330
|
+
@click=${(e) => {
|
|
331
|
+
e.stopPropagation();
|
|
332
|
+
this.open = false;
|
|
333
|
+
this.dispatchEvent(new CustomEvent('modal-close', {
|
|
334
|
+
bubbles: true,
|
|
335
|
+
composed: true,
|
|
336
|
+
detail: { modal: this }
|
|
337
|
+
}));
|
|
338
|
+
}}
|
|
323
339
|
aria-label="Close modal"
|
|
324
340
|
type="button">
|
|
325
|
-
<nr-icon class="modal-close-icon" name="
|
|
341
|
+
<nr-icon class="modal-close-icon" name="x"></nr-icon>
|
|
326
342
|
</button>
|
|
327
343
|
` : nothing}
|
|
328
344
|
</div>
|
package/modal.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n ModalSize,\n ModalPosition,\n ModalAnimation,\n ModalBackdrop,\n EMPTY_STRING\n} from './modal.types.js';\nimport { styles } from './modal.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ModalManager } from './modal-manager.js';\n\n\n// Import controllers\nimport {\n ModalDragController,\n ModalDragHost,\n ModalKeyboardController,\n ModalKeyboardHost\n} from './controllers/index.js';\n\n/**\n * Versatile modal component with multiple sizes, animations, and enhanced functionality.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-modal open title=\"My Modal\">\n * <p>Modal content goes here</p>\n * </nr-modal>\n * \n * <!-- With custom configuration -->\n * <nr-modal \n * open\n * size=\"large\"\n * position=\"top\"\n * animation=\"zoom\"\n * backdrop=\"static\"\n * draggable>\n * <div slot=\"header\">\n * <nr-icon name=\"info\"></nr-icon>\n * <span>Custom Header</span>\n * </div>\n * <p>Modal content</p>\n * <div slot=\"footer\">\n * <nr-button type=\"secondary\">Cancel</nr-button>\n * <nr-button type=\"primary\">OK</nr-button>\n * </div>\n * </nr-modal>\n * ```\n * \n * @fires modal-open - Modal opened\n * @fires modal-close - Modal closed\n * @fires modal-before-close - Before modal closes (cancelable)\n * @fires modal-after-open - After modal opens\n * @fires modal-escape - Escape key pressed\n * \n * @slot default - Modal body content\n * @slot header - Custom header content\n * @slot footer - Custom footer content\n */\n@customElement('nr-modal')\nexport class NrModalElement extends NuralyUIBaseMixin(LitElement) \n implements ModalDragHost, ModalKeyboardHost {\n static override styles = styles;\n\n /** Whether the modal is open */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /** Modal size (small, medium, large, xl) */\n @property({ type: String })\n size: ModalSize = ModalSize.Medium;\n\n /** Modal position (center, top, bottom) */\n @property({ type: String })\n position: ModalPosition = ModalPosition.Center;\n\n /** Animation type */\n @property({ type: String })\n animation: ModalAnimation = ModalAnimation.Fade;\n\n /** Backdrop behavior */\n @property({ type: String })\n backdrop: ModalBackdrop = ModalBackdrop.Closable;\n\n /** Whether the modal can be closed */\n @property({ type: Boolean })\n closable = true;\n\n /** Whether the modal can be dragged */\n @property({ type: Boolean })\n modalDraggable = false;\n\n /** Whether the modal is resizable */\n @property({ type: Boolean })\n resizable = false;\n\n /** Whether the modal is fullscreen */\n @property({ type: Boolean })\n fullscreen = false;\n\n /** Modal title */\n @property({ type: String })\n modalTitle = EMPTY_STRING;\n\n /** Show close button in header */\n @property({ type: Boolean, attribute: 'show-close-button' })\n showCloseButton = true;\n\n /** Header icon */\n @property({ type: String })\n headerIcon = EMPTY_STRING;\n\n /** Z-index for the modal */\n @property({ type: Number })\n zIndex = 1000;\n\n /** Custom width */\n @property({ type: String })\n width = EMPTY_STRING;\n\n /** Custom height */\n @property({ type: String })\n height = EMPTY_STRING;\n\n /** Dragging state */\n @state()\n isDragging = false;\n\n /** Current X offset for dragging */\n @property({ type: Number })\n offsetX = 0;\n\n /** Current Y offset for dragging */\n @property({ type: Number })\n offsetY = 0;\n\n /** Animation state */\n @state()\n private animationState: 'closed' | 'opening' | 'open' | 'closing' = 'closed';\n\n /** Previous focus element */\n private previousActiveElement: Element | null = null;\n\n override requiredComponents = ['nr-icon', 'nr-button'];\n\n // Controllers\n private dragController = new ModalDragController(this);\n private keyboardController = new ModalKeyboardController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // Restore focus when modal is destroyed\n if (this.previousActiveElement instanceof HTMLElement) {\n this.previousActiveElement.focus();\n }\n }\n\n override willUpdate(changedProperties: PropertyValues) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n }\n }\n\n private handleOpen() {\n // Register with modal manager and get z-index\n const assignedZIndex = ModalManager.openModal(this);\n this.zIndex = assignedZIndex;\n \n // Set animation state to opening\n this.animationState = 'opening';\n \n // Dispatch before open event\n this.dispatchEvent(new CustomEvent('modal-open', {\n bubbles: true,\n detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n }));\n\n // Wait for DOM update, then start JavaScript animation\n this.updateComplete.then(() => {\n this.startOpenAnimation();\n });\n }\n\n private startOpenAnimation() {\n const modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n const backdropElement = this.shadowRoot?.querySelector('.modal-backdrop') as HTMLElement;\n \n if (!modalElement || !backdropElement) return;\n\n // Get animation keyframes based on animation type\n const { modalKeyframes} = this.getAnimationKeyframes();\n \n // Start animations\n const modalAnimation = modalElement.animate(modalKeyframes, {\n duration: 300,\n easing: 'ease',\n fill: 'forwards'\n });\n\n\n // When animation completes\n modalAnimation.addEventListener('finish', () => {\n this.animationState = 'open';\n \n // Only focus if this is the top modal\n if (ModalManager.isTopModal(this)) {\n this.keyboardController.focusFirstElement();\n }\n \n // Dispatch after open event\n this.dispatchEvent(new CustomEvent('modal-after-open', {\n bubbles: true,\n detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n }));\n });\n }\n\n private getAnimationKeyframes() {\n const backdropKeyframes = [\n { opacity: 0 },\n { opacity: 1 }\n ];\n\n let modalKeyframes;\n switch (this.animation) {\n case 'fade':\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.9)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n break;\n case 'zoom':\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.7)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n break;\n case 'slide-up':\n modalKeyframes = [\n { opacity: 0, transform: 'translateY(20px)' },\n { opacity: 1, transform: 'translateY(0)' }\n ];\n break;\n case 'slide-down':\n modalKeyframes = [\n { opacity: 0, transform: 'translateY(-20px)' },\n { opacity: 1, transform: 'translateY(0)' }\n ];\n break;\n default:\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.9)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n }\n\n return { modalKeyframes, backdropKeyframes };\n }\n\n private handleClose() {\n this.animationState = 'closing';\n \n // Unregister from modal manager\n ModalManager.closeModal(this);\n \n // Reset drag position\n this.dragController.resetPosition();\n \n // Wait for animation to complete\n setTimeout(() => {\n this.animationState = 'closed';\n }, 300);\n }\n\n /**\n * Opens the modal\n */\n openModal() {\n this.open = true;\n }\n\n /**\n * Closes the modal\n */\n closeModal() {\n if (!this.closable) return;\n\n // Dispatch before close event (cancelable)\n const beforeCloseEvent = new CustomEvent('modal-before-close', {\n bubbles: true,\n cancelable: true,\n detail: { \n modal: this,\n cancel: () => beforeCloseEvent.preventDefault()\n }\n });\n\n const dispatched = this.dispatchEvent(beforeCloseEvent);\n \n // Only close if event wasn't cancelled\n if (dispatched) {\n this.open = false;\n \n // Dispatch close event\n this.dispatchEvent(new CustomEvent('modal-close', {\n bubbles: true,\n detail: { modal: this }\n }));\n }\n }\n\n private handleBackdropClick = (event: MouseEvent) => {\n // Only allow backdrop close if this is the top modal and backdrop is closable\n if (this.backdrop === ModalBackdrop.Closable && \n event.target === event.currentTarget && \n ModalManager.handleBackdropClick(this)) {\n this.closeModal();\n }\n };\n\n private getBackdropClasses() {\n return {\n 'modal-backdrop': true,\n 'modal-backdrop--hidden': !this.open,\n [`modal-backdrop--position-${this.position}`]: true\n };\n }\n\n private getModalClasses() {\n return {\n 'modal': true,\n [`modal--size-${this.size}`]: !this.fullscreen,\n 'modal--fullscreen': this.fullscreen,\n [`modal--animation-${this.animation}`]: this.animationState === 'opening' || this.animationState === 'open',\n 'modal--dragging': this.isDragging,\n 'modal--resizable': this.resizable\n };\n }\n\n private getModalStyles() {\n const styles: any = {};\n \n if (this.zIndex) {\n styles['--nuraly-z-modal-backdrop'] = this.zIndex.toString();\n }\n \n if (this.width) {\n styles.width = this.width;\n }\n \n if (this.height) {\n styles.height = this.height;\n }\n \n return styles;\n }\n\n private renderHeader() {\n const hasCustomHeader = this.querySelector('[slot=\"header\"]');\n const hasTitle = this.modalTitle || this.headerIcon;\n \n if (!hasCustomHeader && !hasTitle && !this.showCloseButton) {\n return nothing;\n }\n\n return html`\n <div class=\"modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}\">\n ${hasCustomHeader ? html`\n <div class=\"modal-header-content\">\n <slot name=\"header\"></slot>\n </div>\n ` : hasTitle ? html`\n <div class=\"modal-header-content\">\n ${this.headerIcon ? html`\n <nr-icon class=\"modal-header-icon\" name=\"${this.headerIcon}\"></nr-icon>\n ` : nothing}\n ${this.modalTitle ? html`\n <h2 class=\"modal-title\">${this.modalTitle}</h2>\n ` : nothing}\n </div>\n ` : nothing}\n \n ${this.showCloseButton ? html`\n <button \n class=\"modal-close-button\"\n @click=${this.closeModal}\n aria-label=\"Close modal\"\n type=\"button\">\n <nr-icon class=\"modal-close-icon\" name=\"close\"></nr-icon>\n </button>\n ` : nothing}\n </div>\n `;\n }\n\n private renderFooter() {\n const hasCustomFooter = this.querySelector('[slot=\"footer\"]');\n \n if (!hasCustomFooter) {\n return nothing;\n }\n\n return html`\n <div class=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n\n override updated() {\n this.updateDataTheme();\n }\n\n private updateDataTheme() {\n if (!this.closest('[data-theme]')) {\n this.setAttribute('data-theme', this.currentTheme);\n }\n }\n\n override render() {\n if (!this.open && this.animationState === 'closed') {\n return nothing;\n }\n\n return html`\n <div \n class=${classMap(this.getBackdropClasses())}\n @click=${this.handleBackdropClick}\n style=${styleMap(this.getModalStyles())}>\n \n <div \n class=${classMap(this.getModalClasses())}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}\n tabindex=\"-1\">\n \n ${this.renderHeader()}\n \n <div class=\"modal-body\">\n <slot></slot>\n </div>\n \n ${this.renderFooter()}\n \n ${this.resizable ? html`\n <div class=\"resize-handle\"></div>\n ` : nothing}\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n ModalSize,\n ModalPosition,\n ModalAnimation,\n ModalBackdrop,\n EMPTY_STRING\n} from './modal.types.js';\nimport { styles } from './modal.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ModalManager } from './modal-manager.js';\n\n\n// Import controllers\nimport {\n ModalDragController,\n ModalDragHost,\n ModalKeyboardController,\n ModalKeyboardHost\n} from './controllers/index.js';\n\n/**\n * Versatile modal component with multiple sizes, animations, and enhanced functionality.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-modal open title=\"My Modal\">\n * <p>Modal content goes here</p>\n * </nr-modal>\n * \n * <!-- With custom configuration -->\n * <nr-modal \n * open\n * size=\"large\"\n * position=\"top\"\n * animation=\"zoom\"\n * backdrop=\"static\"\n * draggable>\n * <div slot=\"header\">\n * <nr-icon name=\"info\"></nr-icon>\n * <span>Custom Header</span>\n * </div>\n * <p>Modal content</p>\n * <div slot=\"footer\">\n * <nr-button type=\"secondary\">Cancel</nr-button>\n * <nr-button type=\"primary\">OK</nr-button>\n * </div>\n * </nr-modal>\n * ```\n * \n * @fires modal-open - Modal opened\n * @fires modal-close - Modal closed\n * @fires modal-before-close - Before modal closes (cancelable)\n * @fires modal-after-open - After modal opens\n * @fires modal-escape - Escape key pressed\n * \n * @slot default - Modal body content\n * @slot header - Custom header content\n * @slot footer - Custom footer content\n */\n@customElement('nr-modal')\nexport class NrModalElement extends NuralyUIBaseMixin(LitElement) \n implements ModalDragHost, ModalKeyboardHost {\n static override styles = styles;\n\n /** Whether the modal is open */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /** Modal size (small, medium, large, xl) */\n @property({ type: String })\n size: ModalSize = ModalSize.Medium;\n\n /** Modal position (center, top, bottom) */\n @property({ type: String })\n position: ModalPosition = ModalPosition.Center;\n\n /** Animation type */\n @property({ type: String })\n animation: ModalAnimation = ModalAnimation.Fade;\n\n /** Backdrop behavior */\n @property({ type: String })\n backdrop: ModalBackdrop = ModalBackdrop.Closable;\n\n /** Whether the modal can be closed */\n @property({ type: Boolean })\n closable = true;\n\n /** Whether the modal can be dragged */\n @property({ type: Boolean })\n modalDraggable = false;\n\n /** Whether the modal is resizable */\n @property({ type: Boolean })\n resizable = false;\n\n /** Whether the modal is fullscreen */\n @property({ type: Boolean })\n fullscreen = false;\n\n /** Modal title */\n @property({ type: String })\n modalTitle = EMPTY_STRING;\n\n /** Show close button in header */\n @property({ type: Boolean, attribute: 'show-close-button' })\n showCloseButton = true;\n\n /** Header icon */\n @property({ type: String })\n headerIcon = EMPTY_STRING;\n\n /** Z-index for the modal */\n @property({ type: Number })\n zIndex = 1000;\n\n /** Custom width */\n @property({ type: String })\n width = EMPTY_STRING;\n\n /** Custom height */\n @property({ type: String })\n height = EMPTY_STRING;\n\n /** Dragging state */\n @state()\n isDragging = false;\n\n /** Current X offset for dragging */\n @property({ type: Number })\n offsetX = 0;\n\n /** Current Y offset for dragging */\n @property({ type: Number })\n offsetY = 0;\n\n /** Animation state */\n @state()\n private animationState: 'closed' | 'opening' | 'open' | 'closing' = 'closed';\n\n /** Previous focus element */\n private previousActiveElement: Element | null = null;\n\n override requiredComponents = ['nr-icon', 'nr-button'];\n\n // Controllers\n private dragController = new ModalDragController(this);\n private keyboardController = new ModalKeyboardController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // Restore focus when modal is destroyed\n if (this.previousActiveElement instanceof HTMLElement) {\n this.previousActiveElement.focus();\n }\n }\n\n override willUpdate(changedProperties: PropertyValues) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n }\n }\n\n private handleOpen() {\n // Register with modal manager and get z-index\n const assignedZIndex = ModalManager.openModal(this);\n this.zIndex = assignedZIndex;\n \n // Set animation state to opening\n this.animationState = 'opening';\n \n // Dispatch before open event\n this.dispatchEvent(new CustomEvent('modal-open', {\n bubbles: true,\n detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n }));\n\n // Wait for DOM update, then start JavaScript animation\n this.updateComplete.then(() => {\n this.startOpenAnimation();\n });\n }\n\n private startOpenAnimation() {\n const modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n const backdropElement = this.shadowRoot?.querySelector('.modal-backdrop') as HTMLElement;\n \n if (!modalElement || !backdropElement) return;\n\n // Get animation keyframes based on animation type\n const { modalKeyframes} = this.getAnimationKeyframes();\n \n // Start animations\n const modalAnimation = modalElement.animate(modalKeyframes, {\n duration: 300,\n easing: 'ease',\n fill: 'forwards'\n });\n\n\n // When animation completes\n modalAnimation.addEventListener('finish', () => {\n this.animationState = 'open';\n\n // Clear the animation's fill-forward effect to prevent transform from creating\n // a containing block for fixed-positioned descendants (e.g., dropdowns)\n // commitStyles() persists final state, then cancel() removes animation effect\n modalAnimation.commitStyles();\n modalAnimation.cancel();\n // Now clear the transform that was committed\n modalElement.style.transform = '';\n\n // Only focus if this is the top modal\n if (ModalManager.isTopModal(this)) {\n this.keyboardController.focusFirstElement();\n }\n \n // Dispatch after open event\n this.dispatchEvent(new CustomEvent('modal-after-open', {\n bubbles: true,\n detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n }));\n });\n }\n\n private getAnimationKeyframes() {\n const backdropKeyframes = [\n { opacity: 0 },\n { opacity: 1 }\n ];\n\n let modalKeyframes;\n switch (this.animation) {\n case 'fade':\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.9)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n break;\n case 'zoom':\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.7)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n break;\n case 'slide-up':\n modalKeyframes = [\n { opacity: 0, transform: 'translateY(20px)' },\n { opacity: 1, transform: 'translateY(0)' }\n ];\n break;\n case 'slide-down':\n modalKeyframes = [\n { opacity: 0, transform: 'translateY(-20px)' },\n { opacity: 1, transform: 'translateY(0)' }\n ];\n break;\n default:\n modalKeyframes = [\n { opacity: 0, transform: 'scale(0.9)' },\n { opacity: 1, transform: 'scale(1)' }\n ];\n }\n\n return { modalKeyframes, backdropKeyframes };\n }\n\n private handleClose() {\n this.animationState = 'closing';\n \n // Unregister from modal manager\n ModalManager.closeModal(this);\n \n // Reset drag position\n this.dragController.resetPosition();\n \n // Wait for animation to complete\n setTimeout(() => {\n this.animationState = 'closed';\n }, 300);\n }\n\n /**\n * Opens the modal\n */\n openModal() {\n this.open = true;\n }\n\n /**\n * Closes the modal\n */\n closeModal = () => {\n if (!this.closable) return;\n\n // Dispatch before close event (cancelable)\n const beforeCloseEvent = new CustomEvent('modal-before-close', {\n bubbles: true,\n cancelable: true,\n detail: { \n modal: this,\n cancel: () => beforeCloseEvent.preventDefault()\n }\n });\n\n const dispatched = this.dispatchEvent(beforeCloseEvent);\n\n // Only close if event wasn't cancelled\n if (dispatched) {\n this.open = false;\n\n // Dispatch close event\n this.dispatchEvent(new CustomEvent('modal-close', {\n bubbles: true,\n composed: true,\n detail: { modal: this }\n }));\n }\n }\n\n private handleBackdropClick = (event: MouseEvent) => {\n // Only allow backdrop close if this is the top modal and backdrop is closable\n if (this.backdrop === ModalBackdrop.Closable && \n event.target === event.currentTarget && \n ModalManager.handleBackdropClick(this)) {\n this.closeModal();\n }\n };\n\n private getBackdropClasses() {\n return {\n 'modal-backdrop': true,\n 'modal-backdrop--hidden': !this.open,\n [`modal-backdrop--position-${this.position}`]: true\n };\n }\n\n private getModalClasses() {\n return {\n 'modal': true,\n [`modal--size-${this.size}`]: !this.fullscreen,\n 'modal--fullscreen': this.fullscreen,\n [`modal--animation-${this.animation}`]: this.animationState === 'opening' || this.animationState === 'open',\n 'modal--dragging': this.isDragging,\n 'modal--resizable': this.resizable\n };\n }\n\n private getModalStyles() {\n const styles: any = {};\n \n if (this.zIndex) {\n styles['--nuraly-z-modal-backdrop'] = this.zIndex.toString();\n }\n \n if (this.width) {\n styles.width = this.width;\n }\n \n if (this.height) {\n styles.height = this.height;\n }\n \n return styles;\n }\n\n private renderHeader() {\n const hasCustomHeader = this.querySelector('[slot=\"header\"]');\n const hasTitle = this.modalTitle || this.headerIcon;\n \n if (!hasCustomHeader && !hasTitle && !this.showCloseButton) {\n return nothing;\n }\n\n return html`\n <div class=\"modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}\">\n ${hasCustomHeader ? html`\n <div class=\"modal-header-content\">\n <slot name=\"header\"></slot>\n </div>\n ` : hasTitle ? html`\n <div class=\"modal-header-content\">\n ${this.headerIcon ? html`\n <nr-icon class=\"modal-header-icon\" name=\"${this.headerIcon}\"></nr-icon>\n ` : nothing}\n ${this.modalTitle ? html`\n <h2 class=\"modal-title\">${this.modalTitle}</h2>\n ` : nothing}\n </div>\n ` : nothing}\n \n ${this.showCloseButton ? html`\n <button\n class=\"modal-close-button\"\n @click=${(e: Event) => {\n e.stopPropagation();\n this.open = false;\n this.dispatchEvent(new CustomEvent('modal-close', {\n bubbles: true,\n composed: true,\n detail: { modal: this }\n }));\n }}\n aria-label=\"Close modal\"\n type=\"button\">\n <nr-icon class=\"modal-close-icon\" name=\"x\"></nr-icon>\n </button>\n ` : nothing}\n </div>\n `;\n }\n\n private renderFooter() {\n const hasCustomFooter = this.querySelector('[slot=\"footer\"]');\n \n if (!hasCustomFooter) {\n return nothing;\n }\n\n return html`\n <div class=\"modal-footer\">\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n\n override updated() {\n this.updateDataTheme();\n }\n\n private updateDataTheme() {\n if (!this.closest('[data-theme]')) {\n this.setAttribute('data-theme', this.currentTheme);\n }\n }\n\n override render() {\n if (!this.open && this.animationState === 'closed') {\n return nothing;\n }\n\n return html`\n <div \n class=${classMap(this.getBackdropClasses())}\n @click=${this.handleBackdropClick}\n style=${styleMap(this.getModalStyles())}>\n \n <div \n class=${classMap(this.getModalClasses())}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}\n tabindex=\"-1\">\n \n ${this.renderHeader()}\n \n <div class=\"modal-body\">\n <slot></slot>\n </div>\n \n ${this.renderFooter()}\n \n ${this.resizable ? html`\n <div class=\"resize-handle\"></div>\n ` : nothing}\n </div>\n </div>\n `;\n }\n}\n"]}
|
package/modal.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuWxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Modal component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-modal component with\n * clean CSS variable usage and proper theme switching support.\n */\nexport const styles = css`\n :host {\n display: contents;\n font-family: var(--nuraly-font-family);\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n \n /* Ensure theme variables are properly inherited */\n --modal-border-radius: var(--nuraly-border-radius-modal, 8px);\n \n /* Ensure clean state transitions when theme changes */\n * {\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n /* Modal backdrop */\n .modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));\n z-index: var(--nuraly-z-modal-backdrop, 1000);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));\n backdrop-filter: var(--nuraly-modal-backdrop-filter, none);\n \n &.modal-backdrop--hidden {\n display: none;\n }\n \n &.modal-backdrop--position-top {\n align-items: flex-start;\n padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));\n }\n \n &.modal-backdrop--position-bottom {\n align-items: flex-end;\n padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));\n }\n }\n\n /* Nested modals support */\n .modal-backdrop {\n /* Ensure each modal backdrop has its own stacking context */\n z-index: var(--nuraly-z-modal-backdrop, 1000);\n }\n\n /* Nested modal backdrop styling */\n .modal-backdrop + .modal-backdrop {\n /* Subsequent modals get slightly darker backdrop */\n background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));\n }\n\n /* Nested modal animation delay to avoid conflicts */\n .modal-backdrop:not(:first-of-type) {\n animation-delay: 0.1s;\n }\n\n /* Modal container */\n .modal {\n position: relative;\n background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));\n border-radius: var(--modal-border-radius);\n box-shadow: var(--nuraly-shadow-modal, \n 0 6px 16px 0 rgba(0, 0, 0, 0.08), \n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n );\n border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));\n max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n display: flex;\n flex-direction: column;\n outline: none;\n \n &:focus {\n outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n outline-offset: var(--nuraly-focus-outline-offset, 1px);\n }\n }\n\n\n /* Modal sizes */\n .modal--size-small {\n width: var(--nuraly-modal-width-small, 400px);\n min-height: var(--nuraly-modal-min-height-small, 200px);\n }\n\n .modal--size-medium {\n width: var(--nuraly-modal-width-medium, 600px);\n min-height: var(--nuraly-modal-min-height-medium, 300px);\n }\n\n .modal--size-large {\n width: var(--nuraly-modal-width-large, 800px);\n min-height: var(--nuraly-modal-min-height-large, 400px);\n }\n\n .modal--size-xl {\n width: var(--nuraly-modal-width-xl, 1000px);\n min-height: var(--nuraly-modal-min-height-xl, 500px);\n }\n\n .modal--fullscreen {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n }\n\n /* Modal header */\n .modal-header {\n padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: var(--nuraly-modal-header-height);\n flex-shrink: 0;\n \n &.modal-header--draggable {\n cursor: move;\n user-select: none;\n }\n }\n\n .modal-header-content {\n display: flex;\n align-items: center;\n gap: var(--nuraly-spacing-03, 0.5rem);\n flex: 1;\n min-width: 0;\n }\n\n .modal-header-icon {\n flex-shrink: 0;\n width: var(--nuraly-modal-header-icon-size, 20px);\n height: var(--nuraly-modal-header-icon-size, 20px);\n color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));\n }\n\n .modal-title {\n font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));\n font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));\n color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));\n margin: 0;\n line-height: var(--nuraly-line-height-02, 1.375);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .modal-close-button {\n flex-shrink: 0;\n width: var(--nuraly-modal-close-size, 32px);\n height: var(--nuraly-modal-close-size, 32px);\n border: none;\n background: transparent;\n border-radius: var(--nuraly-border-radius-sm, 4px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n \n &:hover {\n background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));\n color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));\n }\n \n &:focus {\n outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n outline-offset: var(--nuraly-focus-outline-offset, 1px);\n }\n \n &:active {\n background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));\n }\n }\n\n .modal-close-icon {\n width: var(--nuraly-modal-close-icon-size, 16px);\n height: var(--nuraly-modal-close-icon-size, 16px);\n }\n\n /* Carbon theme specific - sharp corners for close button */\n :host([data-theme=\"carbon\"]) .modal-close-button,\n :host([data-theme=\"carbon-light\"]) .modal-close-button,\n :host([data-theme=\"carbon-dark\"]) .modal-close-button {\n border-radius: 0;\n }\n\n /* Modal body */\n .modal-body {\n flex: 1;\n padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n overflow-y: auto;\n color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));\n line-height: var(--nuraly-line-height-03, 1.5);\n }\n\n /* Modal footer */\n .modal-footer {\n padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));\n border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--nuraly-spacing-03, 0.5rem);\n min-height: var(--nuraly-modal-footer-height, 48px);\n flex-shrink: 0;\n }\n\n /* Animation keyframes */\n @keyframes modalFadeIn {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes modalZoomIn {\n from {\n opacity: 0;\n transform: scale(0.7);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes modalSlideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes modalSlideDown {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n /* Animation classes */\n .modal-backdrop--animation-fade {\n animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-fade {\n animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-zoom {\n animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-slide-up {\n animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-slide-down {\n animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n /* Dragging state */\n .modal--dragging {\n user-select: none;\n cursor: move;\n }\n\n /* Resizing handles (when resizable) */\n .modal--resizable {\n resize: both;\n overflow: auto;\n }\n\n .resize-handle {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 20px;\n height: 20px;\n cursor: se-resize;\n background: linear-gradient(\n -45deg,\n transparent 40%,\n var(--nuraly-color-border, #e0e0e0) 40%,\n var(--nuraly-color-border, #e0e0e0) 60%,\n transparent 60%\n );\n }\n\n /* Responsive behavior */\n @media (max-width: 768px) {\n .modal-backdrop {\n padding: var(--nuraly-spacing-02, 0.25rem);\n }\n \n .modal--size-small,\n .modal--size-medium,\n .modal--size-large,\n .modal--size-xl {\n width: 100%;\n max-width: none;\n }\n \n .modal-header,\n .modal-body,\n .modal-footer {\n padding-left: var(--nuraly-spacing-04, 0.75rem);\n padding-right: var(--nuraly-spacing-04, 0.75rem);\n }\n }\n\n /* Dark theme support through CSS custom properties */\n @media (prefers-color-scheme: dark) {\n :host(:not([data-theme])) {\n --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);\n }\n }\n`;"]}
|
|
1
|
+
{"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuWxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Modal component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-modal component with\n * clean CSS variable usage and proper theme switching support.\n */\nexport const styles = css`\n :host {\n display: contents;\n font-family: var(--nuraly-font-family);\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n \n /* Ensure theme variables are properly inherited */\n --modal-border-radius: var(--nuraly-border-radius-modal, 8px);\n \n /* Ensure clean state transitions when theme changes */\n * {\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n /* Modal backdrop */\n .modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));\n z-index: var(--nuraly-z-modal-backdrop, 1000);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));\n backdrop-filter: var(--nuraly-modal-backdrop-filter, none);\n \n &.modal-backdrop--hidden {\n display: none;\n }\n \n &.modal-backdrop--position-top {\n align-items: flex-start;\n padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));\n }\n \n &.modal-backdrop--position-bottom {\n align-items: flex-end;\n padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));\n }\n }\n\n /* Nested modals support */\n .modal-backdrop {\n /* Ensure each modal backdrop has its own stacking context */\n z-index: var(--nuraly-z-modal-backdrop, 1000);\n }\n\n /* Nested modal backdrop styling */\n .modal-backdrop + .modal-backdrop {\n /* Subsequent modals get slightly darker backdrop */\n background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));\n }\n\n /* Nested modal animation delay to avoid conflicts */\n .modal-backdrop:not(:first-of-type) {\n animation-delay: 0.1s;\n }\n\n /* Modal container */\n .modal {\n position: relative;\n background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));\n border-radius: var(--modal-border-radius);\n box-shadow: var(--nuraly-shadow-modal, \n 0 6px 16px 0 rgba(0, 0, 0, 0.08), \n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n );\n border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));\n max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n display: flex;\n flex-direction: column;\n outline: none;\n \n &:focus {\n outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n outline-offset: var(--nuraly-focus-outline-offset, 1px);\n }\n }\n\n\n /* Modal sizes */\n .modal--size-small {\n width: var(--nuraly-modal-width-small, 400px);\n min-height: var(--nuraly-modal-min-height-small, 200px);\n }\n\n .modal--size-medium {\n width: var(--nuraly-modal-width-medium, 600px);\n min-height: var(--nuraly-modal-min-height-medium, 300px);\n }\n\n .modal--size-large {\n width: var(--nuraly-modal-width-large, 800px);\n min-height: var(--nuraly-modal-min-height-large, 400px);\n }\n\n .modal--size-xl {\n width: var(--nuraly-modal-width-xl, 1000px);\n min-height: var(--nuraly-modal-min-height-xl, 500px);\n }\n\n .modal--fullscreen {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n }\n\n /* Modal header */\n .modal-header {\n padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: var(--nuraly-modal-header-height);\n flex-shrink: 0;\n \n &.modal-header--draggable {\n cursor: move;\n user-select: none;\n }\n }\n\n .modal-header-content {\n display: flex;\n align-items: center;\n gap: var(--nuraly-spacing-03, 0.5rem);\n flex: 1;\n min-width: 0;\n }\n\n .modal-header-icon {\n flex-shrink: 0;\n width: var(--nuraly-modal-header-icon-size, 20px);\n height: var(--nuraly-modal-header-icon-size, 20px);\n color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));\n }\n\n .modal-title {\n font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));\n font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));\n color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));\n margin: 0;\n line-height: var(--nuraly-line-height-02, 1.375);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .modal-close-button {\n flex-shrink: 0;\n width: var(--nuraly-modal-close-size, 32px);\n height: var(--nuraly-modal-close-size, 32px);\n border: none;\n background: transparent;\n border-radius: var(--nuraly-border-radius-sm, 4px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n \n &:hover {\n background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));\n color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));\n }\n \n &:focus {\n outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n outline-offset: var(--nuraly-focus-outline-offset, 1px);\n }\n \n &:active {\n background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));\n }\n }\n\n .modal-close-icon {\n width: var(--nuraly-modal-close-icon-size, 16px);\n height: var(--nuraly-modal-close-icon-size, 16px);\n }\n\n /* Carbon theme specific - sharp corners for close button */\n :host([data-theme=\"carbon\"]) .modal-close-button,\n :host([data-theme=\"carbon-light\"]) .modal-close-button,\n :host([data-theme=\"carbon-dark\"]) .modal-close-button {\n border-radius: 0;\n }\n\n /* Modal body */\n .modal-body {\n flex: 1;\n padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n overflow-y: auto;\n color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));\n line-height: var(--nuraly-line-height-03, 1.5);\n }\n\n /* Modal footer */\n .modal-footer {\n padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));\n border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--nuraly-spacing-03, 0.5rem);\n min-height: var(--nuraly-modal-footer-height, 48px);\n flex-shrink: 0;\n }\n\n /* Animation keyframes */\n @keyframes modalFadeIn {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes modalZoomIn {\n from {\n opacity: 0;\n transform: scale(0.7);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes modalSlideUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes modalSlideDown {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n /* Animation classes */\n .modal-backdrop--animation-fade {\n animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-fade {\n animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-zoom {\n animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-slide-up {\n animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n .modal--animation-slide-down {\n animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;\n }\n\n /* Dragging state */\n .modal--dragging {\n user-select: none;\n cursor: move;\n }\n\n /* Resizing handles (when resizable) */\n .modal--resizable {\n resize: both;\n overflow: auto;\n }\n\n .resize-handle {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 20px;\n height: 20px;\n cursor: se-resize;\n background: linear-gradient(\n -45deg,\n transparent 40%,\n var(--nuraly-color-border, #e0e0e0) 40%,\n var(--nuraly-color-border, #e0e0e0) 60%,\n transparent 60%\n );\n }\n\n /* Responsive behavior */\n @media (max-width: 768px) {\n .modal-backdrop {\n padding: var(--nuraly-spacing-02, 0.25rem);\n }\n \n .modal--size-small,\n .modal--size-medium,\n .modal--size-large,\n .modal--size-xl {\n width: 100%;\n max-width: none;\n }\n \n .modal-header,\n .modal-body,\n .modal-footer {\n padding-left: var(--nuraly-spacing-04, 0.75rem);\n padding-right: var(--nuraly-spacing-04, 0.75rem);\n }\n }\n\n /* Dark theme support through CSS custom properties */\n @media (prefers-color-scheme: dark) {\n :host(:not([data-theme])) {\n --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);\n }\n }\n`;"]}
|
package/modal.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"modal.types.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,4BAAe,CAAA;IACf,8BAAiB,CAAA;IACjB,4BAAe,CAAA;IACf,8BAAiB,CAAA;AACnB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,kCAAiB,CAAA;IACjB,4BAAW,CAAA;IACX,kCAAiB,CAAA;AACnB,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,+BAAa,CAAA;IACb,+BAAa,CAAA;IACb,sCAAoB,CAAA;IACpB,0CAAwB,CAAA;IACxB,+BAAa,CAAA;AACf,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,kCAAiB,CAAA;IACjB,sCAAqB,CAAA;IACrB,8BAAa,CAAA,CAAC,cAAc;AAC9B,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAkDD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC;AAEpC;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAa,EAAsB,EAAE;IAC/D,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAkB,CAAC,CAAC;AAC/D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAA0B,EAAE;IACvE,OAAO,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,KAAsB,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAA2B,EAAE;IACzE,OAAO,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,KAAuB,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAA0B,EAAE;IACvE,OAAO,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,KAAsB,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,QAAQ,EAAE,aAAa,CAAC,MAAM;IAC9B,SAAS,EAAE,cAAc,CAAC,IAAI;IAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ;IAChC,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,eAAe;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,KAAK,EAAE,YAAY;IACnB,eAAe,EAAE,IAAI;IACrB,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,gBAAgB,EAAE,KAAK;IACvB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,SAAS;CAClB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Modal size options\n */\nexport enum ModalSize {\n Small = 'small',\n Medium = 'medium', \n Large = 'large',\n ExtraLarge = 'xl'\n}\n\n/**\n * Modal position options\n */\nexport enum ModalPosition {\n Center = 'center',\n Top = 'top',\n Bottom = 'bottom'\n}\n\n/**\n * Modal animation types\n */\nexport enum ModalAnimation {\n Fade = 'fade',\n Zoom = 'zoom',\n SlideUp = 'slide-up',\n SlideDown = 'slide-down',\n None = 'none'\n}\n\n/**\n * Modal backdrop behavior\n */\nexport enum ModalBackdrop {\n Static = 'static', // clicking backdrop doesn't close modal\n Closable = 'closable', // clicking backdrop closes modal\n None = 'none' // no backdrop\n}\n\n/**\n * Modal events\n */\nexport interface ModalEvents {\n 'modal-open': CustomEvent<void>;\n 'modal-close': CustomEvent<void>;\n 'modal-before-close': CustomEvent<{ cancel: () => void }>;\n 'modal-after-open': CustomEvent<void>;\n 'modal-escape': CustomEvent<void>;\n}\n\n/**\n * Modal configuration interface\n */\nexport interface ModalConfig {\n size?: ModalSize;\n position?: ModalPosition;\n animation?: ModalAnimation;\n backdrop?: ModalBackdrop;\n closable?: boolean;\n draggable?: boolean;\n resizable?: boolean;\n fullscreen?: boolean;\n destroyOnClose?: boolean;\n zIndex?: number;\n}\n\n/**\n * Modal header configuration\n */\nexport interface ModalHeader {\n title?: string;\n showCloseButton?: boolean;\n icon?: string;\n draggable?: boolean;\n}\n\n/**\n * Modal footer configuration\n */\nexport interface ModalFooter {\n showCancelButton?: boolean;\n showOkButton?: boolean;\n cancelText?: string;\n okText?: string;\n okType?: 'primary' | 'secondary' | 'danger';\n}\n\n/**\n * Constants\n */\nexport const EMPTY_STRING = '';\nexport const DEFAULT_Z_INDEX = 1000;\n\n/**\n * Type guards\n */\nexport const isModalSize = (value: string): value is ModalSize => {\n return Object.values(ModalSize).includes(value as ModalSize);\n};\n\nexport const isModalPosition = (value: string): value is ModalPosition => {\n return Object.values(ModalPosition).includes(value as ModalPosition);\n};\n\nexport const isModalAnimation = (value: string): value is ModalAnimation => {\n return Object.values(ModalAnimation).includes(value as ModalAnimation);\n};\n\nexport const isModalBackdrop = (value: string): value is ModalBackdrop => {\n return Object.values(ModalBackdrop).includes(value as ModalBackdrop);\n};\n\n/**\n * Default configurations\n */\nexport const DEFAULT_MODAL_CONFIG: Required<ModalConfig> = {\n size: ModalSize.Medium,\n position: ModalPosition.Center,\n animation: ModalAnimation.Fade,\n backdrop: ModalBackdrop.Closable,\n closable: true,\n draggable: false,\n resizable: false,\n fullscreen: false,\n destroyOnClose: false,\n zIndex: DEFAULT_Z_INDEX\n};\n\nexport const DEFAULT_MODAL_HEADER: Required<ModalHeader> = {\n title: EMPTY_STRING,\n showCloseButton: true,\n icon: EMPTY_STRING,\n draggable: false\n};\n\nexport const DEFAULT_MODAL_FOOTER: Required<ModalFooter> = {\n showCancelButton: false,\n showOkButton: false,\n cancelText: 'Cancel',\n okText: 'OK',\n okType: 'primary'\n};"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/modal/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,YAAY,EAAE,aAAa;QAC3B,aAAa,EAAE,cAAc;QAC7B,oBAAoB,EAAE,oBAAoB;QAC1C,kBAAkB,EAAE,kBAAkB;QACtC,cAAc,EAAE,eAAe;KAChC;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrModalElement } from './modal.component.js';\n\nexport const NrModal = createComponent({\n tagName: 'nr-modal',\n elementClass: NrModalElement,\n react: React,\n events: {\n 'modal-open': 'onModalOpen',\n 'modal-close': 'onModalClose',\n 'modal-before-close': 'onModalBeforeClose',\n 'modal-after-open': 'onModalAfterOpen',\n 'modal-escape': 'onModalEscape',\n },\n});\n"]}
|