@maggioli-design-system/mds-modal 5.3.0 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/mds-modal.cjs.entry.js +34 -3
  3. package/dist/cjs/mds-modal.cjs.js +1 -1
  4. package/dist/collection/common/floating-controller.js +3 -3
  5. package/dist/collection/common/slot.js +10 -1
  6. package/dist/collection/common/string.js +30 -0
  7. package/dist/collection/components/mds-modal/mds-modal.css +124 -0
  8. package/dist/collection/components/mds-modal/mds-modal.js +59 -2
  9. package/dist/collection/components/mds-modal/meta/dictionary.js +5 -1
  10. package/dist/collection/components/mds-modal/test/mds-modal.stories.js +20 -2
  11. package/dist/collection/dictionary/keyboard.js +84 -0
  12. package/dist/collection/type/keyboard.js +1 -0
  13. package/dist/components/mds-modal.js +36 -4
  14. package/dist/documentation.json +46 -1
  15. package/dist/esm/loader.js +1 -1
  16. package/dist/esm/mds-modal.entry.js +34 -3
  17. package/dist/esm/mds-modal.js +1 -1
  18. package/dist/esm-es5/loader.js +1 -1
  19. package/dist/esm-es5/mds-modal.entry.js +1 -1
  20. package/dist/esm-es5/mds-modal.js +1 -1
  21. package/dist/mds-modal/mds-modal.esm.js +1 -1
  22. package/dist/mds-modal/p-2c91cf1f.entry.js +1 -0
  23. package/dist/mds-modal/p-69576bb4.system.entry.js +1 -0
  24. package/dist/mds-modal/p-c6899cb0.system.js +1 -1
  25. package/dist/stats.json +84 -16
  26. package/dist/types/common/slot.d.ts +2 -1
  27. package/dist/types/common/string.d.ts +4 -0
  28. package/dist/types/components/mds-modal/mds-modal.d.ts +8 -1
  29. package/dist/types/components/mds-modal/meta/dictionary.d.ts +2 -1
  30. package/dist/types/components/mds-modal/meta/types.d.ts +1 -0
  31. package/dist/types/components/mds-modal/test/mds-modal.stories.d.ts +11 -0
  32. package/dist/types/components.d.ts +10 -2
  33. package/dist/types/dictionary/keyboard.d.ts +2 -0
  34. package/dist/types/type/keyboard.d.ts +12 -0
  35. package/documentation.json +61 -1
  36. package/package.json +3 -3
  37. package/readme.md +18 -16
  38. package/src/common/floating-controller.ts +6 -6
  39. package/src/common/slot.ts +11 -0
  40. package/src/common/string.ts +42 -0
  41. package/src/components/mds-modal/mds-modal.css +7 -1
  42. package/src/components/mds-modal/mds-modal.tsx +36 -1
  43. package/src/components/mds-modal/meta/dictionary.ts +6 -0
  44. package/src/components/mds-modal/meta/types.ts +4 -0
  45. package/src/components/mds-modal/readme.md +18 -16
  46. package/src/components/mds-modal/test/mds-modal.stories.tsx +57 -3
  47. package/src/components.d.ts +10 -2
  48. package/src/dictionary/keyboard.ts +87 -0
  49. package/src/fixtures/icons.json +18 -1
  50. package/src/meta/keyboard/keys.json +83 -0
  51. package/src/tailwind/components.css +11 -0
  52. package/src/tailwind/fouc.css +118 -0
  53. package/src/type/keyboard.ts +93 -0
  54. package/www/build/mds-modal.esm.js +1 -1
  55. package/www/build/p-2c91cf1f.entry.js +1 -0
  56. package/www/build/p-69576bb4.system.entry.js +1 -0
  57. package/www/build/p-c6899cb0.system.js +1 -1
  58. package/dist/mds-modal/p-413a00c5.entry.js +0 -1
  59. package/dist/mds-modal/p-96958acc.system.entry.js +0 -1
  60. package/www/build/p-413a00c5.entry.js +0 -1
  61. package/www/build/p-96958acc.system.entry.js +0 -1
@@ -0,0 +1,87 @@
1
+ const keyboardKeyNameDictionary = [
2
+ '0',
3
+ '1',
4
+ '2',
5
+ '3',
6
+ '4',
7
+ '5',
8
+ '6',
9
+ '7',
10
+ '8',
11
+ '9',
12
+ 'a',
13
+ 'alt',
14
+ 'altleft',
15
+ 'altright',
16
+ 'arrowdown',
17
+ 'arrowleft',
18
+ 'arrowright',
19
+ 'arrowup',
20
+ 'b',
21
+ 'backspace',
22
+ 'c',
23
+ 'capslock',
24
+ 'command',
25
+ 'commandleft',
26
+ 'commandright',
27
+ 'control',
28
+ 'controlleft',
29
+ 'controlright',
30
+ 'd',
31
+ 'delete',
32
+ 'e',
33
+ 'end',
34
+ 'enter',
35
+ 'escape',
36
+ 'f',
37
+ 'f1',
38
+ 'f10',
39
+ 'f11',
40
+ 'f12',
41
+ 'f2',
42
+ 'f3',
43
+ 'f4',
44
+ 'f5',
45
+ 'f6',
46
+ 'f7',
47
+ 'f8',
48
+ 'f9',
49
+ 'g',
50
+ 'h',
51
+ 'home',
52
+ 'i',
53
+ 'j',
54
+ 'k',
55
+ 'l',
56
+ 'm',
57
+ 'n',
58
+ 'o',
59
+ 'option',
60
+ 'optionleft',
61
+ 'optionright',
62
+ 'p',
63
+ 'pagedown',
64
+ 'pageup',
65
+ 'q',
66
+ 'r',
67
+ 's',
68
+ 'shift',
69
+ 'shiftleft',
70
+ 'shiftright',
71
+ 'space',
72
+ 't',
73
+ 'tab',
74
+ 'u',
75
+ 'v',
76
+ 'w',
77
+ 'windows',
78
+ 'windowsleft',
79
+ 'windowsright',
80
+ 'x',
81
+ 'y',
82
+ 'z',
83
+ ]
84
+
85
+ export {
86
+ keyboardKeyNameDictionary,
87
+ }
@@ -1,5 +1,6 @@
1
1
  [
2
2
  "mdi/alien",
3
+ "mdi/apple-keyboard-shift",
3
4
  "mdi/barley",
4
5
  "mdi/baseball",
5
6
  "mdi/crown",
@@ -12,8 +13,10 @@
12
13
  "mdi/folder-open",
13
14
  "mdi/handshake",
14
15
  "mdi/harddisk",
16
+ "mdi/keyboard-space",
15
17
  "mdi/license",
16
18
  "mdi/map-marker",
19
+ "mdi/npm",
17
20
  "mdi/replay",
18
21
  "mdi/vector-curve",
19
22
  "mgg/abitazione-principale",
@@ -368,8 +371,16 @@
368
371
  "mi/baseline/indeterminate-check-box",
369
372
  "mi/baseline/info",
370
373
  "mi/baseline/insert-drive-file",
374
+ "mi/baseline/keyboard",
371
375
  "mi/baseline/keyboard-arrow-down",
376
+ "mi/baseline/keyboard-arrow-left",
377
+ "mi/baseline/keyboard-arrow-right",
372
378
  "mi/baseline/keyboard-arrow-up",
379
+ "mi/baseline/keyboard-capslock",
380
+ "mi/baseline/keyboard-command-key",
381
+ "mi/baseline/keyboard-option-key",
382
+ "mi/baseline/keyboard-return",
383
+ "mi/baseline/keyboard-tab",
373
384
  "mi/baseline/light-mode",
374
385
  "mi/baseline/local-activity",
375
386
  "mi/baseline/location-city",
@@ -379,6 +390,7 @@
379
390
  "mi/baseline/meeting-room",
380
391
  "mi/baseline/more-vert",
381
392
  "mi/baseline/navigate-next",
393
+ "mi/baseline/north",
382
394
  "mi/baseline/panorama",
383
395
  "mi/baseline/person",
384
396
  "mi/baseline/pets",
@@ -389,6 +401,7 @@
389
401
  "mi/baseline/route",
390
402
  "mi/baseline/send",
391
403
  "mi/baseline/settings",
404
+ "mi/baseline/south",
392
405
  "mi/baseline/sports",
393
406
  "mi/baseline/sports-soccer",
394
407
  "mi/baseline/stadium",
@@ -397,6 +410,8 @@
397
410
  "mi/baseline/tv",
398
411
  "mi/baseline/unfold-less",
399
412
  "mi/baseline/unfold-more",
413
+ "mi/baseline/vertical-align-bottom",
414
+ "mi/baseline/vertical-align-top",
400
415
  "mi/baseline/videocam",
401
416
  "mi/baseline/visibility",
402
417
  "mi/baseline/visibility-off",
@@ -405,6 +420,7 @@
405
420
  "mi/baseline/web",
406
421
  "mi/baseline/wysiwyg",
407
422
  "mi/outline/auto-awesome",
423
+ "mi/outline/backspace",
408
424
  "mi/outline/circle",
409
425
  "mi/outline/dark-mode",
410
426
  "mi/outline/help-outline",
@@ -413,5 +429,6 @@
413
429
  "mi/round/email",
414
430
  "mi/round/menu",
415
431
  "mi/round/more-vert",
416
- "mi/round/person"
432
+ "mi/round/person",
433
+ "mi/sharp/window"
417
434
  ]
@@ -0,0 +1,83 @@
1
+ {
2
+ "0": { "description": "keyNumber", "group": "Number", "alias": "0", "keyCodes": ["Digit0", "Numpad0"] },
3
+ "1": { "description": "keyNumber", "group": "Number", "alias": "1", "keyCodes": ["Digit1", "Numpad1"] },
4
+ "2": { "description": "keyNumber", "group": "Number", "alias": "2", "keyCodes": ["Digit2", "Numpad2"] },
5
+ "3": { "description": "keyNumber", "group": "Number", "alias": "3", "keyCodes": ["Digit3", "Numpad3"] },
6
+ "4": { "description": "keyNumber", "group": "Number", "alias": "4", "keyCodes": ["Digit4", "Numpad4"] },
7
+ "5": { "description": "keyNumber", "group": "Number", "alias": "5", "keyCodes": ["Digit5", "Numpad5"] },
8
+ "6": { "description": "keyNumber", "group": "Number", "alias": "6", "keyCodes": ["Digit6", "Numpad6"] },
9
+ "7": { "description": "keyNumber", "group": "Number", "alias": "7", "keyCodes": ["Digit7", "Numpad7"] },
10
+ "8": { "description": "keyNumber", "group": "Number", "alias": "8", "keyCodes": ["Digit8", "Numpad8"] },
11
+ "9": { "description": "keyNumber", "group": "Number", "alias": "9", "keyCodes": ["Digit9", "Numpad9"] },
12
+ "a": { "description": "keyCharacter", "group": "Character", "alias": "A", "keyCodes": ["KeyA"] },
13
+ "alt": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyCodes": ["AltLeft", "AltRight"] },
14
+ "altleft": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyboardPosition": {"left": true}, "keyCodes": ["AltLeft"] },
15
+ "altright": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyboardPosition": {"right": true}, "keyCodes": ["AltRight"] },
16
+ "arrowdown": { "description": "navArrowDown", "group": "Arrow", "alias": "ArrowDown", "keyCodes": ["ArrowDown"] },
17
+ "arrowleft": { "description": "navArrowLeft", "group": "Arrow", "alias": "ArrowLeft", "keyCodes": ["ArrowLeft"] },
18
+ "arrowright": { "description": "navArrowRight", "group": "Arrow", "alias": "ArrowRight", "keyCodes": ["ArrowRight"] },
19
+ "arrowup": { "description": "navArrowUp", "group": "Arrow", "alias": "ArrowUp", "keyCodes": ["ArrowUp"] },
20
+ "b": { "description": "keyCharacter", "group": "Character", "alias": "B", "keyCodes": ["KeyB"] },
21
+ "backspace": { "description": "specBackspace", "group": "Special", "alias": "Backspace", "keyCodes": ["Backspace"] },
22
+ "c": { "description": "keyCharacter", "group": "Character", "alias": "C", "keyCodes": ["KeyC"] },
23
+ "capslock": { "description": "specCapsLock", "group": "Special", "alias": "CapsLock", "keyCodes": ["CapsLock"] },
24
+ "command": { "description": "modMeta", "group": "Modificator", "alias": "Cmd", "keyCodes": ["MetaLeft", "MetaRight"] },
25
+ "commandleft": { "description": "modMeta", "group": "Modificator", "alias": "Cmd", "keyboardPosition": {"left": true}, "keyCodes": ["MetaLeft"] },
26
+ "commandright": { "description": "modMeta", "group": "Modificator", "alias": "Cmd", "keyboardPosition": {"right": true}, "keyCodes": ["MetaRight"] },
27
+ "control": { "description": "modControl", "group": "Modificator", "alias": "Ctrl", "keyCodes": ["ControlLeft", "ControlRight"] },
28
+ "controlleft": { "description": "modControl", "group": "Modificator", "alias": "Ctrl", "keyboardPosition": {"left": true}, "keyCode": "Control", "keyCodes": ["ControlLeft"] },
29
+ "controlright": { "description": "modControl", "group": "Modificator", "alias": "Ctrl", "keyboardPosition": {"right": true}, "keyCode": "Control", "keyCodes": ["ControlRight"] },
30
+ "d": { "description": "keyCharacter", "group": "Character", "alias": "D", "keyCodes": ["KeyD"] },
31
+ "delete": { "description": "specDelete", "group": "Special", "alias": "Delete", "keyCodes": ["Delete"] },
32
+ "e": { "description": "keyCharacter", "group": "Character", "alias": "E", "keyCodes": ["KeyE"] },
33
+ "end": { "description": "navEnd", "group": "Navigator", "alias": "End", "keyCodes": ["End"] },
34
+ "enter": { "description": "specEnter", "group": "Special", "alias": "Enter", "keyCodes": ["Enter"] },
35
+ "escape": { "description": "specEscape", "group": "Special", "alias": "Esc", "keyCodes": ["Escape"] },
36
+ "f": { "description": "keyCharacter", "group": "Character", "alias": "F", "keyCodes": ["KeyF"] },
37
+ "f1": { "description": "keyFunction", "group": "Function", "alias": "F1", "keyCodes": ["F1"] },
38
+ "f10": { "description": "keyFunction", "group": "Function", "alias": "F10", "keyCodes": ["F10"] },
39
+ "f11": { "description": "keyFunction", "group": "Function", "alias": "F11", "keyCodes": ["F11"] },
40
+ "f12": { "description": "keyFunction", "group": "Function", "alias": "F12", "keyCodes": ["F12"] },
41
+ "f2": { "description": "keyFunction", "group": "Function", "alias": "F2", "keyCodes": ["F2"] },
42
+ "f3": { "description": "keyFunction", "group": "Function", "alias": "F3", "keyCodes": ["F3"] },
43
+ "f4": { "description": "keyFunction", "group": "Function", "alias": "F4", "keyCodes": ["F4"] },
44
+ "f5": { "description": "keyFunction", "group": "Function", "alias": "F5", "keyCodes": ["F5"] },
45
+ "f6": { "description": "keyFunction", "group": "Function", "alias": "F6", "keyCodes": ["F6"] },
46
+ "f7": { "description": "keyFunction", "group": "Function", "alias": "F7", "keyCodes": ["F7"] },
47
+ "f8": { "description": "keyFunction", "group": "Function", "alias": "F8", "keyCodes": ["F8"] },
48
+ "f9": { "description": "keyFunction", "group": "Function", "alias": "F9", "keyCodes": ["F9"] },
49
+ "g": { "description": "keyCharacter", "group": "Character", "alias": "G", "keyCodes": ["KeyG"] },
50
+ "h": { "description": "keyCharacter", "group": "Character", "alias": "H", "keyCodes": ["KeyH"] },
51
+ "home": { "description": "navHome", "group": "Navigator", "alias": "Home", "keyCodes": ["Home"] },
52
+ "i": { "description": "keyCharacter", "group": "Character", "alias": "I", "keyCodes": ["KeyI"] },
53
+ "j": { "description": "keyCharacter", "group": "Character", "alias": "J", "keyCodes": ["KeyJ"] },
54
+ "k": { "description": "keyCharacter", "group": "Character", "alias": "K", "keyCodes": ["KeyK"] },
55
+ "l": { "description": "keyCharacter", "group": "Character", "alias": "L", "keyCodes": ["KeyL"] },
56
+ "m": { "description": "keyCharacter", "group": "Character", "alias": "M", "keyCodes": ["KeyM"] },
57
+ "n": { "description": "keyCharacter", "group": "Character", "alias": "N", "keyCodes": ["KeyN"] },
58
+ "o": { "description": "keyCharacter", "group": "Character", "alias": "O", "keyCodes": ["KeyO"] },
59
+ "option": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyCodes": ["AltLeft", "AltRight"] },
60
+ "optionleft": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyboardPosition": {"left": true}, "keyCodes": ["AltLeft"] },
61
+ "optionright": { "description": "modAlt", "group": "Modificator", "alias": "Alt", "keyboardPosition": {"right": true}, "keyCodes": ["AltRight"] },
62
+ "p": { "description": "keyCharacter", "group": "Character", "alias": "P", "keyCodes": ["KeyP"] },
63
+ "pagedown": { "description": "navPageDown", "group": "Navigator", "alias": "PageDown", "keyCodes": ["PageDown"] },
64
+ "pageup": { "description": "navPageUp", "group": "Navigator", "alias": "PageUp", "keyCodes": ["PageUp"] },
65
+ "q": { "description": "keyCharacter", "group": "Character", "alias": "Q", "keyCodes": ["KeyQ"] },
66
+ "r": { "description": "keyCharacter", "group": "Character", "alias": "R", "keyCodes": ["KeyR"] },
67
+ "s": { "description": "keyCharacter", "group": "Character", "alias": "S", "keyCodes": ["KeyS"] },
68
+ "shift": { "description": "modShift", "group": "Modificator", "alias": "Shift", "keyCodes": ["ShiftLeft", "ShiftRight"] },
69
+ "shiftleft": { "description": "modShift", "group": "Modificator", "alias": "Shift", "keyboardPosition": {"left": true}, "keyCodes": ["ShiftLeft"] },
70
+ "shiftright": { "description": "modShift", "group": "Modificator", "alias": "Shift", "keyboardPosition": {"right": true}, "keyCodes": ["ShiftRight"] },
71
+ "space": { "description": "specSpace", "group": "Special", "alias": "Space", "keyCodes": ["Space"] },
72
+ "t": { "description": "keyCharacter", "group": "Character", "alias": "T", "keyCodes": ["KeyT"] },
73
+ "tab": { "description": "specTab", "group": "Special", "alias": "Tab", "keyCodes": ["Tab"] },
74
+ "u": { "description": "keyCharacter", "group": "Character", "alias": "U", "keyCodes": ["KeyU"] },
75
+ "v": { "description": "keyCharacter", "group": "Character", "alias": "V", "keyCodes": ["KeyV"] },
76
+ "w": { "description": "keyCharacter", "group": "Character", "alias": "W", "keyCodes": ["KeyW"] },
77
+ "windows": { "description": "modMeta", "group": "Modificator", "alias": "Win", "keyCodes": ["MetaLeft", "MetaRight"] },
78
+ "windowsleft": { "description": "modMeta", "group": "Modificator", "alias": "Win", "keyboardPosition": {"left": true}, "keyCodes": ["MetaLeft"] },
79
+ "windowsright": { "description": "modMeta", "group": "Modificator", "alias": "Win", "keyboardPosition": {"right": true}, "keyCodes": ["MetaRight"] },
80
+ "x": { "description": "keyCharacter", "group": "Character", "alias": "X", "keyCodes": ["KeyX"] },
81
+ "y": { "description": "keyCharacter", "group": "Character", "alias": "Y", "keyCodes": ["KeyY"] },
82
+ "z": { "description": "keyCharacter", "group": "Character", "alias": "Z", "keyCodes": ["KeyZ"] }
83
+ }
@@ -83,4 +83,15 @@
83
83
  }
84
84
  }
85
85
  }
86
+
87
+ .not-hydrated {
88
+ animation-duration: 0s;
89
+ border-color: transparent;
90
+ box-shadow: 0 0 0 transparent;
91
+ opacity: 0;
92
+ outline-color: transparent;
93
+ transition-delay: 0s;
94
+ transition-duration: 0s;
95
+ visibility: hidden;
96
+ }
86
97
  }
@@ -0,0 +1,118 @@
1
+ :host(:not(:is([hydrated], .hydrated))) {
2
+ animation-duration: 0s;
3
+ border-color: transparent;
4
+ box-shadow: 0 0 0 transparent;
5
+ opacity: 0;
6
+ outline-color: transparent;
7
+ transition-delay: 0s;
8
+ transition-duration: 0s;
9
+ visibility: hidden;
10
+ }
11
+
12
+ /* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
13
+
14
+ mds-accordion:not(:is([hydrated], .hydrated)),
15
+ mds-accordion-item:not(:is([hydrated], .hydrated)),
16
+ mds-accordion-timer:not(:is([hydrated], .hydrated)),
17
+ mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
18
+ mds-author:not(:is([hydrated], .hydrated)),
19
+ mds-avatar:not(:is([hydrated], .hydrated)),
20
+ mds-badge:not(:is([hydrated], .hydrated)),
21
+ mds-banner:not(:is([hydrated], .hydrated)),
22
+ mds-benchmark-bar:not(:is([hydrated], .hydrated)),
23
+ mds-bibliography:not(:is([hydrated], .hydrated)),
24
+ mds-breadcrumb:not(:is([hydrated], .hydrated)),
25
+ mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
26
+ mds-button:not(:is([hydrated], .hydrated)),
27
+ mds-card:not(:is([hydrated], .hydrated)),
28
+ mds-card-content:not(:is([hydrated], .hydrated)),
29
+ mds-card-footer:not(:is([hydrated], .hydrated)),
30
+ mds-card-header:not(:is([hydrated], .hydrated)),
31
+ mds-card-media:not(:is([hydrated], .hydrated)),
32
+ mds-chip:not(:is([hydrated], .hydrated)),
33
+ mds-details:not(:is([hydrated], .hydrated)),
34
+ mds-dropdown:not(:is([hydrated], .hydrated)),
35
+ mds-entity:not(:is([hydrated], .hydrated)),
36
+ mds-file:not(:is([hydrated], .hydrated)),
37
+ mds-file-preview:not(:is([hydrated], .hydrated)),
38
+ mds-filter:not(:is([hydrated], .hydrated)),
39
+ mds-filter-item:not(:is([hydrated], .hydrated)),
40
+ mds-header:not(:is([hydrated], .hydrated)),
41
+ mds-header-bar:not(:is([hydrated], .hydrated)),
42
+ mds-help:not(:is([hydrated], .hydrated)),
43
+ mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
44
+ mds-hr:not(:is([hydrated], .hydrated)),
45
+ mds-icon:not(:is([hydrated], .hydrated)),
46
+ mds-img:not(:is([hydrated], .hydrated)),
47
+ mds-input:not(:is([hydrated], .hydrated)),
48
+ mds-input-field:not(:is([hydrated], .hydrated)),
49
+ mds-input-range:not(:is([hydrated], .hydrated)),
50
+ mds-input-select:not(:is([hydrated], .hydrated)),
51
+ mds-input-switch:not(:is([hydrated], .hydrated)),
52
+ mds-input-tip:not(:is([hydrated], .hydrated)),
53
+ mds-input-tip-item:not(:is([hydrated], .hydrated)),
54
+ mds-input-upload:not(:is([hydrated], .hydrated)),
55
+ mds-keyboard:not(:is([hydrated], .hydrated)),
56
+ mds-keyboard-key:not(:is([hydrated], .hydrated)),
57
+ mds-kpi:not(:is([hydrated], .hydrated)),
58
+ mds-kpi-item:not(:is([hydrated], .hydrated)),
59
+ mds-label:not(:is([hydrated], .hydrated)),
60
+ mds-list:not(:is([hydrated], .hydrated)),
61
+ mds-list-item:not(:is([hydrated], .hydrated)),
62
+ mds-modal:not(:is([hydrated], .hydrated)),
63
+ mds-note:not(:is([hydrated], .hydrated)),
64
+ mds-notification:not(:is([hydrated], .hydrated)),
65
+ mds-paginator:not(:is([hydrated], .hydrated)),
66
+ mds-paginator-item:not(:is([hydrated], .hydrated)),
67
+ mds-pref:not(:is([hydrated], .hydrated)),
68
+ mds-pref-animation:not(:is([hydrated], .hydrated)),
69
+ mds-pref-consumption:not(:is([hydrated], .hydrated)),
70
+ mds-pref-contrast:not(:is([hydrated], .hydrated)),
71
+ mds-pref-language:not(:is([hydrated], .hydrated)),
72
+ mds-pref-language-item:not(:is([hydrated], .hydrated)),
73
+ mds-pref-theme:not(:is([hydrated], .hydrated)),
74
+ mds-price-table:not(:is([hydrated], .hydrated)),
75
+ mds-price-table-features:not(:is([hydrated], .hydrated)),
76
+ mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
77
+ mds-price-table-features-row:not(:is([hydrated], .hydrated)),
78
+ mds-price-table-header:not(:is([hydrated], .hydrated)),
79
+ mds-price-table-list:not(:is([hydrated], .hydrated)),
80
+ mds-price-table-list-item:not(:is([hydrated], .hydrated)),
81
+ mds-progress:not(:is([hydrated], .hydrated)),
82
+ mds-push-notification:not(:is([hydrated], .hydrated)),
83
+ mds-push-notifications:not(:is([hydrated], .hydrated)),
84
+ mds-quote:not(:is([hydrated], .hydrated)),
85
+ mds-separator:not(:is([hydrated], .hydrated)),
86
+ mds-spinner:not(:is([hydrated], .hydrated)),
87
+ mds-stepper-bar:not(:is([hydrated], .hydrated)),
88
+ mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
89
+ mds-tab:not(:is([hydrated], .hydrated)),
90
+ mds-tab-bar:not(:is([hydrated], .hydrated)),
91
+ mds-tab-bar-item:not(:is([hydrated], .hydrated)),
92
+ mds-tab-item:not(:is([hydrated], .hydrated)),
93
+ mds-table:not(:is([hydrated], .hydrated)),
94
+ mds-table-body:not(:is([hydrated], .hydrated)),
95
+ mds-table-cell:not(:is([hydrated], .hydrated)),
96
+ mds-table-footer:not(:is([hydrated], .hydrated)),
97
+ mds-table-header:not(:is([hydrated], .hydrated)),
98
+ mds-table-header-cell:not(:is([hydrated], .hydrated)),
99
+ mds-table-row:not(:is([hydrated], .hydrated)),
100
+ mds-text:not(:is([hydrated], .hydrated)),
101
+ mds-toast:not(:is([hydrated], .hydrated)),
102
+ mds-tooltip:not(:is([hydrated], .hydrated)),
103
+ mds-tree:not(:is([hydrated], .hydrated)),
104
+ mds-tree-item:not(:is([hydrated], .hydrated)),
105
+ mds-url-view:not(:is([hydrated], .hydrated)),
106
+ mds-usage:not(:is([hydrated], .hydrated)),
107
+ mds-video-wall:not(:is([hydrated], .hydrated)),
108
+ mds-zero:not(:is([hydrated], .hydrated))
109
+ {
110
+ animation-duration: 0s;
111
+ border-color: transparent;
112
+ box-shadow: 0 0 0 transparent;
113
+ opacity: 0;
114
+ outline-color: transparent;
115
+ transition-delay: 0s;
116
+ transition-duration: 0s;
117
+ visibility: hidden;
118
+ }
@@ -0,0 +1,93 @@
1
+ export type KeyboardKeyData = {
2
+ alias: string
3
+ description: string
4
+ group: string
5
+ keyCodes: string[]
6
+ keyboardPosition?: { left?: boolean; right?: boolean }
7
+ }
8
+
9
+ export type KeyboardKeyName =
10
+ | '0'
11
+ | '1'
12
+ | '2'
13
+ | '3'
14
+ | '4'
15
+ | '5'
16
+ | '6'
17
+ | '7'
18
+ | '8'
19
+ | '9'
20
+ | 'a'
21
+ | 'alt'
22
+ | 'altleft'
23
+ | 'altright'
24
+ | 'arrowdown'
25
+ | 'arrowleft'
26
+ | 'arrowright'
27
+ | 'arrowup'
28
+ | 'b'
29
+ | 'backspace'
30
+ | 'c'
31
+ | 'capslock'
32
+ | 'command'
33
+ | 'commandleft'
34
+ | 'commandright'
35
+ | 'control'
36
+ | 'controlleft'
37
+ | 'controlright'
38
+ | 'd'
39
+ | 'delete'
40
+ | 'e'
41
+ | 'end'
42
+ | 'enter'
43
+ | 'escape'
44
+ | 'f'
45
+ | 'f1'
46
+ | 'f10'
47
+ | 'f11'
48
+ | 'f12'
49
+ | 'f2'
50
+ | 'f3'
51
+ | 'f4'
52
+ | 'f5'
53
+ | 'f6'
54
+ | 'f7'
55
+ | 'f8'
56
+ | 'f9'
57
+ | 'g'
58
+ | 'h'
59
+ | 'home'
60
+ | 'i'
61
+ | 'j'
62
+ | 'k'
63
+ | 'l'
64
+ | 'm'
65
+ | 'n'
66
+ | 'o'
67
+ | 'option'
68
+ | 'optionleft'
69
+ | 'optionright'
70
+ | 'p'
71
+ | 'pagedown'
72
+ | 'pageup'
73
+ | 'q'
74
+ | 'r'
75
+ | 's'
76
+ | 'shift'
77
+ | 'shiftleft'
78
+ | 'shiftright'
79
+ | 'space'
80
+ | 't'
81
+ | 'tab'
82
+ | 'u'
83
+ | 'v'
84
+ | 'w'
85
+ | 'windows'
86
+ | 'windowsleft'
87
+ | 'windowsright'
88
+ | 'x'
89
+ | 'y'
90
+ | 'z'
91
+
92
+
93
+ export type KeyboardKeyMap = Record<KeyboardKeyName, KeyboardKeyData>;
@@ -1 +1 @@
1
- import{p as e,b as o}from"./p-ee90f86a.js";export{s as setNonce}from"./p-ee90f86a.js";import{g as n}from"./p-e1255160.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((async e=>(await n(),o([["p-413a00c5",[[1,"mds-modal",{opened:[1540],position:[1537],animating:[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{opened:["handleOpenProp"]}]]]],e))));
1
+ import{p as e,b as o}from"./p-ee90f86a.js";export{s as setNonce}from"./p-ee90f86a.js";import{g as n}from"./p-e1255160.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((async e=>(await n(),o([["p-2c91cf1f",[[1,"mds-modal",{opened:[1540],position:[1537],animating:[1537],overflow:[513]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{opened:["handleOpenProp"]}]]]],e))));
@@ -0,0 +1 @@
1
+ import{r as t,c as n,h as o,H as e,g as a}from"./p-ee90f86a.js";function d(t){var n,o,e="";if("string"==typeof t||"number"==typeof t)e+=t;else if("object"==typeof t)if(Array.isArray(t)){var a=t.length;for(n=0;n<a;n++)t[n]&&(o=d(t[n]))&&(e&&(e+=" "),e+=o)}else for(o in t)t[o]&&(e&&(e+=" "),e+=o);return e}function s(){for(var t,n,o=0,e="",a=arguments.length;o<a;o++)(t=arguments[o])&&(n=d(t))&&(e&&(e+=" "),e+=n);return e}const i=(t,n=1e3)=>t.includes("ms")?Number(t.replace("ms","")):t.includes("s")?1e3*Number(t.replace("s","")):n,r=class{constructor(o){t(this,o),this.closeEvent=n(this,"mdsModalClose",7),this.hideEvent=n(this,"mdsModalHide",7),this.window=!1,this.top=!1,this.bottom=!1,this.opened=!1,this.position="center",this.animating="none",this.overflow="auto",this.updateCSSCustomProps=()=>{var t;if("undefined"==typeof window)return;const n=window.getComputedStyle(this.host);this.cssTransitionDuration=null!==(t=n.getPropertyValue("--mds-modal-transition-duration"))&&void 0!==t?t:"500"},this.stopIntroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),clearTimeout(this.animationDelayTimeout)},this.stopOutroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),this.hideEvent.emit(),clearTimeout(this.animationDelayTimeout)},this.disableOverflow=()=>{document&&(document.body.style.overflow&&(this.bodyOverflow=document.body.style.overflow),document.body.style.overflow="hidden")},this.enableOverflow=()=>{document&&(this.bodyOverflow?document.body.style.overflow=this.bodyOverflow:document.body.style.removeProperty("overflow"))},this.animateOpenWindow=()=>{this.animating="intro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopIntroAnimationWindow.bind(this),i(this.cssTransitionDuration))},this.animateCloseWindow=()=>{this.animating="outro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopOutroAnimationWindow.bind(this),i(this.cssTransitionDuration))},this.closeModal=t=>{var n;"mds-modal"===(null===(n=t.target)||void 0===n?void 0:n.localName)&&(this.opened=t.target!==t.currentTarget,this.opened||this.closeEvent.emit())}}componentWillLoad(){var t;this.bottom=null!==this.host.querySelector('[slot="bottom"]'),this.top=null!==this.host.querySelector('[slot="top"]'),this.window=null!==this.host.querySelector('[slot="window"]'),"auto"===this.overflow&&this.opened&&this.disableOverflow(),this.window&&(null===(t=this.host.querySelector('[slot="window"]'))||void 0===t||t.setAttribute("role","dialog"))}componentWillRender(){this.animating=this.opened?"intro":"outro"}componentDidLoad(){this.updateCSSCustomProps()}handleOpenProp(t){if(t)return"auto"===this.overflow&&this.disableOverflow(),void this.animateOpenWindow();"auto"===this.overflow&&this.enableOverflow(),this.animateCloseWindow()}onModalCloseListener(){this.opened=!1}onBannerCloseListener(){this.opened=!1}render(){return o(e,{key:"7c55fe13070b89c43efcc7168dbdb8d07b749b8a","aria-modal":s(this.opened?"true":"false"),onClick:t=>{this.closeModal(t)}},this.window?o("slot",{name:"window"}):o("div",{class:s("window",(this.top||this.bottom)&&`window-${this.top?"-top":""}${this.bottom?"-bottom":""}`),part:"window"},this.top&&o("slot",{name:"top"}),o("slot",null),this.bottom&&o("slot",{name:"bottom"})),!this.window&&o("mds-button",{key:"e9b3c0037f8a0cf2fc3b284dc02b2f7b16bbe205",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:t=>{this.closeModal(t)}}))}get host(){return a(this)}static get watchers(){return{opened:["handleOpenProp"]}}};r.style='@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-radius: Set the border radius of the window\n * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds\n * @prop --mds-modal-custom-window-distance: Set the distance between the slotted modal window and the screen bounds\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-transition-duration: 500ms;\n --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-radius: 0;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-window-distance: 0;\n --mds-modal-custom-window-distance: 1.5rem;\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: background-color;\n transition-property: background-color;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host ::slotted([slot="window"]) {\n margin: var(--mds-modal-custom-window-distance);\n}\n\n:host( [position="top"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position="bottom"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.action-close {\n border-radius: 100px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n transition-property: bottom, opacity, top, -webkit-transform;\n transition-property: bottom, opacity, top, transform;\n transition-property: bottom, opacity, top, transform, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host([opened]:not([opened="false"])) .action-close {\n opacity: 1;\n pointer-events: auto;\n}\n\n.action-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n border-radius: var(--mds-modal-window-radius);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n margin: var(--mds-modal-window-distance);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n:host .window {\n -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: opacity, -webkit-transform;\n transition-property: opacity, -webkit-transform;\n transition-property: transform, opacity;\n transition-property: transform, opacity, -webkit-transform;\n -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n -webkit-transform: rotate(0) scale(1) translateY(0);\n transform: rotate(0) scale(1) translateY(0);\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="bottom"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="center"]) .window {\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n height: 100%;\n max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n -webkit-transform: translate(-100%, 0%);\n transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n right: 0.75rem;\n top: 0.75rem;\n -webkit-transform: translateX(-120%) rotate(-45deg);\n transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n:host([position="right"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n height: 100%;\n max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n -webkit-transform: translate(100%, 0%);\n transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n left: 0.75rem;\n top: 0.75rem;\n -webkit-transform: translateX(120%) rotate(45deg);\n transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n -webkit-transform: translate(0, -100%);\n transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="top"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n -webkit-transform: translate(0, -100%);\n transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .action-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n\n :host {\n\n --mds-modal-transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .action-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n\n :host {\n\n --mds-modal-transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n';export{r as mds_modal}
@@ -0,0 +1 @@
1
+ System.register(["./p-bc1fa4e4.system.js"],(function(t){"use strict";var n,o,e,a,d;return{setters:[function(t){n=t.r;o=t.c;e=t.h;a=t.H;d=t.g}],execute:function(){function i(t){var n,o,e="";if("string"==typeof t||"number"==typeof t)e+=t;else if("object"==typeof t)if(Array.isArray(t)){var a=t.length;for(n=0;n<a;n++)t[n]&&(o=i(t[n]))&&(e&&(e+=" "),e+=o)}else for(o in t)t[o]&&(e&&(e+=" "),e+=o);return e}function s(){for(var t,n,o=0,e="",a=arguments.length;o<a;o++)(t=arguments[o])&&(n=i(t))&&(e&&(e+=" "),e+=n);return e}var r=function(t,n){if(n===void 0){n=1e3}if(t.includes("ms")){return Number(t.replace("ms",""))}if(t.includes("s")){return Number(t.replace("s",""))*1e3}return n};var l='@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-radius: Set the border radius of the window\n * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds\n * @prop --mds-modal-custom-window-distance: Set the distance between the slotted modal window and the screen bounds\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-transition-duration: 500ms;\n --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-radius: 0;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-window-distance: 0;\n --mds-modal-custom-window-distance: 1.5rem;\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: background-color;\n transition-property: background-color;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host ::slotted([slot="window"]) {\n margin: var(--mds-modal-custom-window-distance);\n}\n\n:host( [position="top"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position="bottom"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.action-close {\n border-radius: 100px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n transition-property: bottom, opacity, top, -webkit-transform;\n transition-property: bottom, opacity, top, transform;\n transition-property: bottom, opacity, top, transform, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host([opened]:not([opened="false"])) .action-close {\n opacity: 1;\n pointer-events: auto;\n}\n\n.action-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n border-radius: var(--mds-modal-window-radius);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n margin: var(--mds-modal-window-distance);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n:host .window {\n -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-duration: var(--mds-modal-transition-duration);\n transition-duration: var(--mds-modal-transition-duration);\n -webkit-transition-property: opacity, -webkit-transform;\n transition-property: opacity, -webkit-transform;\n transition-property: transform, opacity;\n transition-property: transform, opacity, -webkit-transform;\n -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n -webkit-transform: rotate(0) scale(1) translateY(0);\n transform: rotate(0) scale(1) translateY(0);\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="bottom"]) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="center"]) .window {\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n height: 100%;\n max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n -webkit-transform: translate(-100%, 0%);\n transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n right: 0.75rem;\n top: 0.75rem;\n -webkit-transform: translateX(-120%) rotate(-45deg);\n transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n:host([position="right"]) {\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n height: 100%;\n max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n -webkit-transform: translate(100%, 0%);\n transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n left: 0.75rem;\n top: 0.75rem;\n -webkit-transform: translateX(120%) rotate(45deg);\n transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n -webkit-transform: translate(0, -100%);\n transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n\n:host([position="top"]) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host([position="bottom"]) .window {\n height: auto;\n width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n -webkit-transform: translate(0, -100%);\n transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .action-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n\n :host {\n\n --mds-modal-transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .action-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n\n :host {\n\n --mds-modal-transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n';var m=l;var h=t("mds_modal",function(){function t(t){var e=this;n(this,t);this.closeEvent=o(this,"mdsModalClose",7);this.hideEvent=o(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.opened=false;this.position="center";this.animating="none";this.overflow="auto";this.updateCSSCustomProps=function(){var t;if(typeof window==="undefined")return;var n=window.getComputedStyle(e.host);e.cssTransitionDuration=(t=n.getPropertyValue("--mds-modal-transition-duration"))!==null&&t!==void 0?t:"500"};this.stopIntroAnimationWindow=function(){e.animating="none";e.host.setAttribute("animating","none");clearTimeout(e.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){e.animating="none";e.host.setAttribute("animating","none");e.hideEvent.emit();clearTimeout(e.animationDelayTimeout)};this.disableOverflow=function(){if(document){if(document.body.style.overflow){e.bodyOverflow=document.body.style.overflow}document.body.style.overflow="hidden"}};this.enableOverflow=function(){if(document){if(e.bodyOverflow){document.body.style.overflow=e.bodyOverflow}else{document.body.style.removeProperty("overflow")}}};this.animateOpenWindow=function(){e.animating="intro";clearTimeout(e.animationDelayTimeout);e.animationDelayTimeout=setTimeout(e.stopIntroAnimationWindow.bind(e),r(e.cssTransitionDuration))};this.animateCloseWindow=function(){e.animating="outro";clearTimeout(e.animationDelayTimeout);e.animationDelayTimeout=setTimeout(e.stopOutroAnimationWindow.bind(e),r(e.cssTransitionDuration))};this.closeModal=function(t){var n;if(((n=t.target)===null||n===void 0?void 0:n.localName)!=="mds-modal"){return}e.opened=t.target!==t.currentTarget;if(!e.opened){e.closeEvent.emit()}}}t.prototype.componentWillLoad=function(){var t;this.bottom=this.host.querySelector('[slot="bottom"]')!==null;this.top=this.host.querySelector('[slot="top"]')!==null;this.window=this.host.querySelector('[slot="window"]')!==null;if(this.overflow==="auto"&&this.opened){this.disableOverflow()}if(this.window){(t=this.host.querySelector('[slot="window"]'))===null||t===void 0?void 0:t.setAttribute("role","dialog")}};t.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};t.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};t.prototype.handleOpenProp=function(t){if(t){if(this.overflow==="auto"){this.disableOverflow()}this.animateOpenWindow();return}if(this.overflow==="auto"){this.enableOverflow()}this.animateCloseWindow()};t.prototype.onModalCloseListener=function(){this.opened=false};t.prototype.onBannerCloseListener=function(){this.opened=false};t.prototype.render=function(){var t=this;return e(a,{key:"7c55fe13070b89c43efcc7168dbdb8d07b749b8a","aria-modal":s(this.opened?"true":"false"),onClick:function(n){t.closeModal(n)}},this.window?e("slot",{name:"window"}):e("div",{class:s("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),part:"window"},this.top&&e("slot",{name:"top"}),e("slot",null),this.bottom&&e("slot",{name:"bottom"})),!this.window&&e("mds-button",{key:"e9b3c0037f8a0cf2fc3b284dc02b2f7b16bbe205",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:function(n){t.closeModal(n)}}))};Object.defineProperty(t.prototype,"host",{get:function(){return d(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenProp"]}},enumerable:false,configurable:true});return t}());h.style=m}}}));
@@ -1 +1 @@
1
- var __awaiter=this&&this.__awaiter||function(n,e,t,r){function i(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,o){function c(n){try{a(r.next(n))}catch(n){o(n)}}function u(n){try{a(r["throw"](n))}catch(n){o(n)}}function a(n){n.done?t(n.value):i(n.value).then(c,u)}a((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,c;return c={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function u(n){return function(e){return a([n,e])}}function a(u){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,u[0]&&(t=0)),t)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:t.label++;return{value:u[1],done:false};case 5:t.label++;i=u[1];u=[0];continue;case 7:u=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){t=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){t.label=u[1];break}if(u[0]===6&&t.label<o[1]){t.label=o[1];o=u;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(u);break}if(o[2])t.ops.pop();t.trys.pop();continue}u=e.call(n,t)}catch(n){u=[6,n];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-bc1fa4e4.system.js","./p-56ba5cbf.system.js"],(function(n,e){"use strict";var t,r,i;return{setters:[function(e){t=e.p;r=e.b;n("setNonce",e.s)},function(n){i=n.g}],execute:function(){var n=this;var o=function(){var n=e.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return t(r)};o().then((function(e){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-96958acc.system",[[1,"mds-modal",{opened:[1540],position:[1537],animating:[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{opened:["handleOpenProp"]}]]]],e)]}}))}))}))}}}));
1
+ var __awaiter=this&&this.__awaiter||function(n,e,t,r){function i(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,o){function u(n){try{c(r.next(n))}catch(n){o(n)}}function a(n){try{c(r["throw"](n))}catch(n){o(n)}}function c(n){n.done?t(n.value):i(n.value).then(u,a)}c((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,u;return u={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(n){return function(e){return c([n,e])}}function c(a){if(r)throw new TypeError("Generator is already executing.");while(u&&(u=0,a[0]&&(t=0)),t)try{if(r=1,i&&(o=a[0]&2?i["return"]:a[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;if(i=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:t.label++;return{value:a[1],done:false};case 5:t.label++;i=a[1];a=[0];continue;case 7:a=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){t=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){t.label=a[1];break}if(a[0]===6&&t.label<o[1]){t.label=o[1];o=a;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(a);break}if(o[2])t.ops.pop();t.trys.pop();continue}a=e.call(n,t)}catch(n){a=[6,n];i=0}finally{r=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-bc1fa4e4.system.js","./p-56ba5cbf.system.js"],(function(n,e){"use strict";var t,r,i;return{setters:[function(e){t=e.p;r=e.b;n("setNonce",e.s)},function(n){i=n.g}],execute:function(){var n=this;var o=function(){var n=e.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return t(r)};o().then((function(e){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-69576bb4.system",[[1,"mds-modal",{opened:[1540],position:[1537],animating:[1537],overflow:[513]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{opened:["handleOpenProp"]}]]]],e)]}}))}))}))}}}));