@redvars/peacock 3.5.1 → 3.6.1

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 (225) hide show
  1. package/dist/{BaseButton-DuASuVth.js → BaseButton-BNFAYn-S.js} +2 -2
  2. package/dist/{BaseButton-DuASuVth.js.map → BaseButton-BNFAYn-S.js.map} +1 -1
  3. package/dist/BaseInput-14YmcfK7.js +27 -0
  4. package/dist/BaseInput-14YmcfK7.js.map +1 -0
  5. package/dist/banner.js +2 -3
  6. package/dist/banner.js.map +1 -1
  7. package/dist/{button-DouvOfEU.js → button-colors-Ccys3hvS.js} +5 -294
  8. package/dist/button-colors-Ccys3hvS.js.map +1 -0
  9. package/dist/button-group.js +226 -6
  10. package/dist/button-group.js.map +1 -1
  11. package/dist/button.js +294 -8
  12. package/dist/button.js.map +1 -1
  13. package/dist/calendar-column-view.js +634 -0
  14. package/dist/calendar-column-view.js.map +1 -0
  15. package/dist/calendar-event-BrQ_SEKD.js +199 -0
  16. package/dist/calendar-event-BrQ_SEKD.js.map +1 -0
  17. package/dist/calendar-month-view.js +376 -0
  18. package/dist/calendar-month-view.js.map +1 -0
  19. package/dist/calendar.js +339 -0
  20. package/dist/calendar.js.map +1 -0
  21. package/dist/canvas.js +361 -0
  22. package/dist/canvas.js.map +1 -0
  23. package/dist/cb-compound-expression.js +125 -0
  24. package/dist/cb-compound-expression.js.map +1 -0
  25. package/dist/cb-divider.js +150 -0
  26. package/dist/cb-divider.js.map +1 -0
  27. package/dist/cb-expression.js +75 -0
  28. package/dist/cb-expression.js.map +1 -0
  29. package/dist/cb-predicate.js +137 -0
  30. package/dist/cb-predicate.js.map +1 -0
  31. package/dist/code-editor.js +2 -1
  32. package/dist/code-editor.js.map +1 -1
  33. package/dist/code-highlighter.js +1 -1
  34. package/dist/code-highlighter.js.map +1 -1
  35. package/dist/condition-builder.js +58 -0
  36. package/dist/condition-builder.js.map +1 -0
  37. package/dist/custom-elements-jsdocs.json +8479 -3965
  38. package/dist/custom-elements.json +15228 -7544
  39. package/dist/dropdown-button.js +216 -0
  40. package/dist/dropdown-button.js.map +1 -0
  41. package/dist/event-manager-D-QCmUgR.js +113 -0
  42. package/dist/event-manager-D-QCmUgR.js.map +1 -0
  43. package/dist/fab.js +1 -1
  44. package/dist/flow-designer-DvTUrDp5.js +1656 -0
  45. package/dist/flow-designer-DvTUrDp5.js.map +1 -0
  46. package/dist/flow-designer-node-BWrPuxAR.js +548 -0
  47. package/dist/flow-designer-node-BWrPuxAR.js.map +1 -0
  48. package/dist/flow-designer-node.js +4 -0
  49. package/dist/flow-designer-node.js.map +1 -0
  50. package/dist/flow-designer.js +16 -0
  51. package/dist/flow-designer.js.map +1 -0
  52. package/dist/html-editor.js +27516 -0
  53. package/dist/html-editor.js.map +1 -0
  54. package/dist/icon-button-CK1ZuE-2.js +247 -0
  55. package/dist/icon-button-CK1ZuE-2.js.map +1 -0
  56. package/dist/index.js +29 -6
  57. package/dist/index.js.map +1 -1
  58. package/dist/{is-dark-mode-DicqGkCJ.js → is-dark-mode-DOcaw4Yq.js} +2 -27
  59. package/dist/is-dark-mode-DOcaw4Yq.js.map +1 -0
  60. package/dist/modal.js +412 -0
  61. package/dist/modal.js.map +1 -0
  62. package/dist/{navigation-rail-Lxetd5-Z.js → navigation-rail-DTTkqohi.js} +1049 -2391
  63. package/dist/navigation-rail-DTTkqohi.js.map +1 -0
  64. package/dist/notification-manager.js +268 -0
  65. package/dist/notification-manager.js.map +1 -0
  66. package/dist/peacock-loader.js +93 -8
  67. package/dist/peacock-loader.js.map +1 -1
  68. package/dist/popover-NC7b1lTq.js +1971 -0
  69. package/dist/popover-NC7b1lTq.js.map +1 -0
  70. package/dist/popover-content.js +125 -0
  71. package/dist/popover-content.js.map +1 -0
  72. package/dist/popover.js +4 -0
  73. package/dist/popover.js.map +1 -0
  74. package/dist/split-button.js +388 -0
  75. package/dist/split-button.js.map +1 -0
  76. package/dist/src/__controllers/floating-controller.d.ts +35 -0
  77. package/dist/src/calendar/base-event.d.ts +10 -0
  78. package/dist/src/calendar/calendar-column-view.d.ts +41 -0
  79. package/dist/src/calendar/calendar-event.d.ts +7 -0
  80. package/dist/src/calendar/calendar-month-view.d.ts +31 -0
  81. package/dist/src/calendar/calendar.d.ts +65 -0
  82. package/dist/src/calendar/event-manager.d.ts +17 -0
  83. package/dist/src/calendar/index.d.ts +4 -0
  84. package/dist/src/calendar/types.d.ts +13 -0
  85. package/dist/src/calendar/utils.d.ts +31 -0
  86. package/dist/src/canvas/canvas.d.ts +92 -0
  87. package/dist/src/canvas/index.d.ts +2 -0
  88. package/dist/src/condition-builder/cb-compound-expression.d.ts +31 -0
  89. package/dist/src/condition-builder/cb-divider.d.ts +26 -0
  90. package/dist/src/condition-builder/cb-expression.d.ts +31 -0
  91. package/dist/src/condition-builder/cb-predicate.d.ts +30 -0
  92. package/dist/src/condition-builder/condition-builder.d.ts +27 -0
  93. package/dist/src/condition-builder/index.d.ts +5 -0
  94. package/dist/src/dropdown-button/dropdown-button.d.ts +68 -0
  95. package/dist/src/dropdown-button/index.d.ts +1 -0
  96. package/dist/src/flow-designer/commands.d.ts +66 -0
  97. package/dist/src/flow-designer/flow-designer-node.d.ts +46 -0
  98. package/dist/src/flow-designer/flow-designer.d.ts +133 -0
  99. package/dist/src/flow-designer/index.d.ts +7 -0
  100. package/dist/src/flow-designer/layout.d.ts +30 -0
  101. package/dist/src/flow-designer/types.d.ts +142 -0
  102. package/dist/src/flow-designer/validation.d.ts +43 -0
  103. package/dist/src/flow-designer/workflow-utils.d.ts +40 -0
  104. package/dist/src/html-editor/html-editor.d.ts +89 -0
  105. package/dist/src/html-editor/index.d.ts +2 -0
  106. package/dist/src/index.d.ts +15 -0
  107. package/dist/src/list/index.d.ts +2 -0
  108. package/dist/src/list/list-item.d.ts +35 -0
  109. package/dist/src/list/list.d.ts +28 -0
  110. package/dist/src/menu/menu/menu.d.ts +5 -7
  111. package/dist/src/menu/menu-item/menu-item.d.ts +14 -13
  112. package/dist/src/modal/index.d.ts +1 -0
  113. package/dist/src/modal/modal.d.ts +57 -0
  114. package/dist/src/navigation-rail/navigation-rail.d.ts +3 -7
  115. package/dist/src/notification-manager/index.d.ts +1 -0
  116. package/dist/src/notification-manager/notification-manager.d.ts +44 -0
  117. package/dist/src/number-field/number-field.d.ts +2 -2
  118. package/dist/src/popover/index.d.ts +2 -0
  119. package/dist/src/popover/popover-content.d.ts +29 -0
  120. package/dist/src/popover/popover.d.ts +62 -0
  121. package/dist/src/split-button/index.d.ts +1 -0
  122. package/dist/src/split-button/split-button.d.ts +72 -0
  123. package/dist/src/svg/index.d.ts +1 -0
  124. package/dist/src/svg/svg.d.ts +38 -0
  125. package/dist/src/toolbar/toolbar.d.ts +3 -3
  126. package/dist/src/tooltip/tooltip.d.ts +2 -15
  127. package/dist/test/flow-designer.test.d.ts +1 -0
  128. package/dist/toolbar.js +3 -3
  129. package/dist/toolbar.js.map +1 -1
  130. package/dist/tsconfig.tsbuildinfo +1 -1
  131. package/package.json +10 -2
  132. package/readme.md +3 -3
  133. package/src/__controllers/floating-controller.ts +237 -0
  134. package/src/banner/banner.scss +2 -3
  135. package/src/button/button/button.ts +1 -0
  136. package/src/calendar/base-event.ts +49 -0
  137. package/src/calendar/calendar-column-view.scss +326 -0
  138. package/src/calendar/calendar-column-view.ts +392 -0
  139. package/src/calendar/calendar-event.ts +20 -0
  140. package/src/calendar/calendar-month-view.scss +192 -0
  141. package/src/calendar/calendar-month-view.ts +244 -0
  142. package/src/calendar/calendar.scss +71 -0
  143. package/src/calendar/calendar.ts +298 -0
  144. package/src/calendar/event-manager.ts +117 -0
  145. package/src/calendar/index.ts +4 -0
  146. package/src/calendar/types.ts +14 -0
  147. package/src/calendar/utils.ts +180 -0
  148. package/src/canvas/canvas.scss +60 -0
  149. package/src/canvas/canvas.ts +391 -0
  150. package/src/canvas/index.ts +2 -0
  151. package/src/code-highlighter/code-highlighter.ts +1 -1
  152. package/src/condition-builder/cb-compound-expression.scss +37 -0
  153. package/src/condition-builder/cb-compound-expression.ts +80 -0
  154. package/src/condition-builder/cb-divider.scss +93 -0
  155. package/src/condition-builder/cb-divider.ts +56 -0
  156. package/src/condition-builder/cb-expression.scss +14 -0
  157. package/src/condition-builder/cb-expression.ts +49 -0
  158. package/src/condition-builder/cb-predicate.scss +35 -0
  159. package/src/condition-builder/cb-predicate.ts +102 -0
  160. package/src/condition-builder/condition-builder.scss +13 -0
  161. package/src/condition-builder/condition-builder.ts +38 -0
  162. package/src/condition-builder/index.ts +5 -0
  163. package/src/dropdown-button/demo/index.html +110 -0
  164. package/src/dropdown-button/dropdown-button.scss +22 -0
  165. package/src/dropdown-button/dropdown-button.ts +206 -0
  166. package/src/dropdown-button/index.ts +1 -0
  167. package/src/flow-designer/DEMO.md +239 -0
  168. package/src/flow-designer/commands.ts +278 -0
  169. package/src/flow-designer/flow-designer-node.ts +172 -0
  170. package/src/flow-designer/flow-designer.scss +457 -0
  171. package/src/flow-designer/flow-designer.ts +611 -0
  172. package/src/flow-designer/index.ts +41 -0
  173. package/src/flow-designer/layout.ts +357 -0
  174. package/src/flow-designer/types.ts +166 -0
  175. package/src/flow-designer/validation.ts +284 -0
  176. package/src/flow-designer/workflow-utils.ts +282 -0
  177. package/src/html-editor/html-editor.scss +188 -0
  178. package/src/html-editor/html-editor.ts +491 -0
  179. package/src/html-editor/index.ts +3 -0
  180. package/src/index.ts +27 -1
  181. package/src/list/index.ts +2 -0
  182. package/src/list/list-item.scss +111 -0
  183. package/src/list/list-item.ts +175 -0
  184. package/src/list/list.scss +24 -0
  185. package/src/list/list.ts +51 -0
  186. package/src/menu/menu/menu.scss +2 -2
  187. package/src/menu/menu/menu.ts +91 -101
  188. package/src/menu/menu-item/menu-item.scss +4 -0
  189. package/src/menu/menu-item/menu-item.ts +82 -78
  190. package/src/modal/index.ts +1 -0
  191. package/src/modal/modal.scss +206 -0
  192. package/src/modal/modal.ts +195 -0
  193. package/src/navigation-rail/navigation-rail-item.scss +7 -38
  194. package/src/navigation-rail/navigation-rail-item.ts +1 -2
  195. package/src/navigation-rail/navigation-rail.scss +17 -21
  196. package/src/navigation-rail/navigation-rail.ts +6 -9
  197. package/src/notification-manager/index.ts +1 -0
  198. package/src/notification-manager/notification-manager.scss +113 -0
  199. package/src/notification-manager/notification-manager.ts +199 -0
  200. package/src/number-field/number-field.ts +2 -2
  201. package/src/peacock-loader.ts +83 -0
  202. package/src/popover/index.ts +2 -0
  203. package/src/popover/popover-content.scss +69 -0
  204. package/src/popover/popover-content.ts +51 -0
  205. package/src/popover/popover.scss +7 -0
  206. package/src/popover/popover.ts +170 -0
  207. package/src/split-button/index.ts +1 -0
  208. package/src/split-button/split-button-colors.scss +56 -0
  209. package/src/split-button/split-button-sizes.scss +28 -0
  210. package/src/split-button/split-button.scss +79 -0
  211. package/src/split-button/split-button.ts +236 -0
  212. package/src/svg/index.ts +1 -0
  213. package/src/svg/svg.scss +91 -0
  214. package/src/svg/svg.ts +160 -0
  215. package/src/table/table.ts +2 -2
  216. package/src/toolbar/toolbar.ts +3 -3
  217. package/src/tooltip/tooltip.scss +4 -3
  218. package/src/tooltip/tooltip.ts +46 -104
  219. package/dist/button-DouvOfEU.js.map +0 -1
  220. package/dist/button-group-CEdMwvJJ.js +0 -464
  221. package/dist/button-group-CEdMwvJJ.js.map +0 -1
  222. package/dist/is-dark-mode-DicqGkCJ.js.map +0 -1
  223. package/dist/navigation-rail-Lxetd5-Z.js.map +0 -1
  224. package/dist/src/menu/menu/MenuSurfaceController.d.ts +0 -18
  225. package/src/menu/menu/MenuSurfaceController.ts +0 -61
package/dist/modal.js ADDED
@@ -0,0 +1,412 @@
1
+ import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
2
+ import { n } from './property-1psGvXOq.js';
3
+ import { r } from './state-DwbEjqVk.js';
4
+ import { e } from './class-map-YU7g0o3B.js';
5
+ import './directive-ZPhl09Yt.js';
6
+
7
+ var css_248z = i`@charset "UTF-8";
8
+ * {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ .screen-reader-only {
13
+ display: none !important;
14
+ }
15
+
16
+ :host {
17
+ display: contents;
18
+ --modal-container-color: var(--color-surface-container-high, #ece6f0);
19
+ --modal-scrim-color: rgba(0, 0, 0, 0.32);
20
+ --modal-shape: var(--shape-corner-extra-large, 28px);
21
+ --modal-min-width: 280px;
22
+ --modal-max-width: 560px;
23
+ --modal-max-height: 90dvh;
24
+ --modal-transition-duration: var(--duration-medium2, 300ms);
25
+ --modal-transition-easing: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
26
+ --modal-heading-color: var(--color-on-surface, #1c1b1f);
27
+ --modal-subheading-color: var(--color-on-surface-variant, #49454f);
28
+ --modal-content-color: var(--color-on-surface-variant, #49454f);
29
+ --modal-divider-color: var(--color-outline-variant, #cac4d0);
30
+ --modal-elevation: var(--elevation-level3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3));
31
+ }
32
+
33
+ /* Scrim backdrop */
34
+ .scrim {
35
+ background-color: var(--modal-scrim-color);
36
+ inset: 0;
37
+ opacity: 0;
38
+ pointer-events: none;
39
+ position: fixed;
40
+ transition: opacity var(--modal-transition-duration) var(--modal-transition-easing);
41
+ z-index: 1000;
42
+ }
43
+
44
+ .scrim.visible {
45
+ opacity: 1;
46
+ pointer-events: auto;
47
+ }
48
+
49
+ /* Dialog wrapper — centres the dialog on screen */
50
+ .dialog-wrapper {
51
+ align-items: center;
52
+ display: flex;
53
+ inset: 0;
54
+ justify-content: center;
55
+ overflow-y: auto;
56
+ padding: var(--spacing-400, 2rem) var(--spacing-200, 1rem);
57
+ position: fixed;
58
+ z-index: 1001;
59
+ }
60
+
61
+ /* Dialog container */
62
+ .dialog {
63
+ background-color: var(--modal-container-color);
64
+ border-radius: var(--modal-shape);
65
+ box-shadow: var(--modal-elevation);
66
+ display: flex;
67
+ flex-direction: column;
68
+ max-height: var(--modal-max-height);
69
+ max-width: var(--modal-max-width);
70
+ min-width: var(--modal-min-width);
71
+ opacity: 0;
72
+ outline: none;
73
+ overflow: hidden;
74
+ position: relative;
75
+ transform: scale(0.9);
76
+ width: 100%;
77
+ }
78
+ .dialog.open {
79
+ animation: modal-enter var(--modal-transition-duration) var(--modal-transition-easing) forwards;
80
+ }
81
+ .dialog:not(.open) {
82
+ animation: modal-exit var(--modal-transition-duration) var(--modal-transition-easing) forwards;
83
+ }
84
+
85
+ /* Sizes */
86
+ .dialog.size-xs {
87
+ --modal-max-width: 320px;
88
+ }
89
+
90
+ .dialog.size-sm {
91
+ --modal-max-width: 420px;
92
+ }
93
+
94
+ .dialog.size-md {
95
+ --modal-max-width: 560px;
96
+ }
97
+
98
+ .dialog.size-lg {
99
+ --modal-max-width: 800px;
100
+ }
101
+
102
+ .dialog.size-fullscreen {
103
+ --modal-max-width: 100%;
104
+ --modal-max-height: 100%;
105
+ border-radius: 0;
106
+ max-height: 100dvh;
107
+ max-width: 100vw;
108
+ }
109
+
110
+ .dialog-wrapper:has(.dialog.size-fullscreen) {
111
+ padding: 0;
112
+ }
113
+
114
+ /* Header */
115
+ .dialog-header {
116
+ align-items: flex-start;
117
+ display: flex;
118
+ gap: var(--spacing-200, 1rem);
119
+ padding: var(--spacing-300, 1.5rem) var(--spacing-300, 1.5rem) var(--spacing-200, 1rem);
120
+ }
121
+
122
+ .dialog-heading-section {
123
+ flex: 1;
124
+ min-width: 0;
125
+ }
126
+
127
+ .dialog-subheading {
128
+ color: var(--modal-subheading-color);
129
+ font-family: var(--typography-label-medium-font-family, sans-serif);
130
+ font-size: var(--typography-label-medium-font-size, 0.75rem);
131
+ font-weight: var(--typography-label-medium-font-weight, 500);
132
+ letter-spacing: var(--typography-label-medium-letter-spacing, 0.05em);
133
+ line-height: var(--typography-label-medium-line-height, 1.25rem);
134
+ margin: 0 0 var(--spacing-050, 0.25rem);
135
+ text-transform: uppercase;
136
+ }
137
+
138
+ .dialog-heading {
139
+ color: var(--modal-heading-color);
140
+ font-family: var(--typography-headline-small-font-family, sans-serif);
141
+ font-size: var(--typography-headline-small-font-size, 1.5rem);
142
+ font-weight: var(--typography-headline-small-font-weight, 400);
143
+ letter-spacing: var(--typography-headline-small-letter-spacing, 0);
144
+ line-height: var(--typography-headline-small-line-height, 2rem);
145
+ margin: 0;
146
+ }
147
+
148
+ .dialog-close {
149
+ flex-shrink: 0;
150
+ margin-block-start: -0.25rem;
151
+ margin-inline-end: -0.25rem;
152
+ }
153
+
154
+ /* Body content */
155
+ .dialog-content {
156
+ color: var(--modal-content-color);
157
+ flex: 1 1 auto;
158
+ overflow-y: auto;
159
+ padding: 0 var(--spacing-300, 1.5rem) var(--spacing-300, 1.5rem);
160
+ }
161
+
162
+ /* When there is no header */
163
+ .dialog:not(:has(.dialog-header)) .dialog-content {
164
+ padding-top: var(--spacing-300, 1.5rem);
165
+ }
166
+
167
+ /* Footer */
168
+ .dialog-footer {
169
+ border-top: 1px solid transparent;
170
+ }
171
+
172
+ .dialog-footer:has(slot:not(:empty)),
173
+ .dialog-footer slot::slotted(*) {
174
+ border-top-color: var(--modal-divider-color);
175
+ }
176
+
177
+ /* Loading overlay */
178
+ .dialog-loader {
179
+ align-items: center;
180
+ display: flex;
181
+ inset: 0;
182
+ justify-content: center;
183
+ position: absolute;
184
+ }
185
+
186
+ .dialog-loader-scrim {
187
+ background-color: var(--modal-container-color);
188
+ inset: 0;
189
+ opacity: 0.72;
190
+ position: absolute;
191
+ }
192
+
193
+ /* Animations */
194
+ @keyframes modal-enter {
195
+ from {
196
+ opacity: 0;
197
+ transform: scale(0.9);
198
+ }
199
+ to {
200
+ opacity: 1;
201
+ transform: scale(1);
202
+ }
203
+ }
204
+ @keyframes modal-exit {
205
+ from {
206
+ opacity: 1;
207
+ transform: scale(1);
208
+ }
209
+ to {
210
+ opacity: 0;
211
+ transform: scale(0.9);
212
+ }
213
+ }`;
214
+
215
+ /**
216
+ * @label Modal
217
+ * @tag wc-modal
218
+ * @rawTag modal-wc
219
+ * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
220
+ *
221
+ * @cssprop --modal-container-color - Background color of the dialog container.
222
+ * @cssprop --modal-scrim-color - Color of the scrim backdrop.
223
+ * @cssprop --modal-shape - Corner radius of the dialog container.
224
+ * @cssprop --modal-min-width - Minimum width of the dialog.
225
+ * @cssprop --modal-max-width - Maximum width of the dialog.
226
+ * @cssprop --modal-max-height - Maximum height of the dialog.
227
+ *
228
+ * @example
229
+ * ```html
230
+ * MODAL
231
+ * ```
232
+ * @tags overlay, dialog, feedback
233
+ */
234
+ let Modal = class Modal extends i$1 {
235
+ constructor() {
236
+ super(...arguments);
237
+ /** Whether the modal is open. */
238
+ this.open = false;
239
+ /** Heading text shown in the modal header. */
240
+ this.heading = '';
241
+ /** Optional subheading / label text shown above the heading. */
242
+ this.subheading = '';
243
+ /**
244
+ * Size of the modal dialog.
245
+ * - `"xs"`: Extra-small.
246
+ * - `"sm"`: Small.
247
+ * - `"md"`: Medium (default).
248
+ * - `"lg"`: Large.
249
+ * - `"fullscreen"`: Full-screen dialog.
250
+ */
251
+ this.size = 'md';
252
+ /** When true, hides the close button in the header. */
253
+ this.hideClose = false;
254
+ /** When true, renders a loading overlay inside the modal. */
255
+ this.showLoader = false;
256
+ /** When true, clicking the scrim will not close the modal. */
257
+ this.noScrimClose = false;
258
+ this._visible = false;
259
+ this._handleKeydown = (e) => {
260
+ if (e.key === 'Escape') {
261
+ this._close('escape');
262
+ }
263
+ };
264
+ }
265
+ show() {
266
+ this.open = true;
267
+ }
268
+ hide() {
269
+ this._close('programmatic');
270
+ }
271
+ _close(reason) {
272
+ if (!this.open)
273
+ return;
274
+ this.open = false;
275
+ this.dispatchEvent(new CustomEvent('modal-close', {
276
+ detail: { reason },
277
+ bubbles: true,
278
+ composed: true,
279
+ }));
280
+ }
281
+ _handleScrimClick() {
282
+ if (!this.noScrimClose) {
283
+ this._close('scrim');
284
+ }
285
+ }
286
+ _handleCloseClick() {
287
+ this._close('close-button');
288
+ }
289
+ updated(changedProperties) {
290
+ if (changedProperties.has('open')) {
291
+ if (this.open) {
292
+ this._visible = true;
293
+ document.body.style.overflow = 'hidden';
294
+ document.addEventListener('keydown', this._handleKeydown);
295
+ }
296
+ else {
297
+ document.body.style.overflow = '';
298
+ document.removeEventListener('keydown', this._handleKeydown);
299
+ }
300
+ }
301
+ }
302
+ disconnectedCallback() {
303
+ super.disconnectedCallback();
304
+ document.body.style.overflow = '';
305
+ document.removeEventListener('keydown', this._handleKeydown);
306
+ }
307
+ _handleAnimationEnd(e) {
308
+ if (e.animationName === 'modal-exit') {
309
+ this._visible = false;
310
+ }
311
+ }
312
+ render() {
313
+ if (!this.open && !this._visible)
314
+ return A;
315
+ const hasHeader = this.heading || this.subheading || !this.hideClose;
316
+ return b `
317
+ <div
318
+ class=${e({ scrim: true, visible: this.open })}
319
+ @click=${this._handleScrimClick}
320
+ aria-hidden="true"
321
+ ></div>
322
+
323
+ <div class="dialog-wrapper" role="presentation">
324
+ <div
325
+ class=${e({
326
+ dialog: true,
327
+ open: this.open,
328
+ [`size-${this.size}`]: true,
329
+ 'show-loader': this.showLoader,
330
+ })}
331
+ role="dialog"
332
+ aria-modal="true"
333
+ aria-labelledby=${this.heading ? 'modal-heading' : A}
334
+ @animationend=${this._handleAnimationEnd}
335
+ >
336
+ ${hasHeader
337
+ ? b `
338
+ <div class="dialog-header">
339
+ <div class="dialog-heading-section">
340
+ ${this.subheading
341
+ ? b `<p class="dialog-subheading">${this.subheading}</p>`
342
+ : A}
343
+ ${this.heading
344
+ ? b `<h2 id="modal-heading" class="dialog-heading">
345
+ ${this.heading}
346
+ </h2>`
347
+ : A}
348
+ </div>
349
+ ${!this.hideClose
350
+ ? b `<wc-icon-button
351
+ class="dialog-close"
352
+ variant="text"
353
+ aria-label="Close dialog"
354
+ @click=${this._handleCloseClick}
355
+ >
356
+ <wc-icon name="close"></wc-icon>
357
+ </wc-icon-button>`
358
+ : A}
359
+ </div>
360
+ `
361
+ : A}
362
+
363
+ <div class="dialog-content">
364
+ <slot></slot>
365
+ </div>
366
+
367
+ <div class="dialog-footer">
368
+ <slot name="footer"></slot>
369
+ </div>
370
+
371
+ ${this.showLoader
372
+ ? b `<div class="dialog-loader" aria-hidden="true">
373
+ <div class="dialog-loader-scrim"></div>
374
+ <wc-spinner></wc-spinner>
375
+ </div>`
376
+ : A}
377
+ </div>
378
+ </div>
379
+ `;
380
+ }
381
+ };
382
+ Modal.styles = [css_248z];
383
+ __decorate([
384
+ n({ type: Boolean, reflect: true })
385
+ ], Modal.prototype, "open", void 0);
386
+ __decorate([
387
+ n({ type: String, reflect: true })
388
+ ], Modal.prototype, "heading", void 0);
389
+ __decorate([
390
+ n({ type: String, reflect: true })
391
+ ], Modal.prototype, "subheading", void 0);
392
+ __decorate([
393
+ n({ type: String, reflect: true })
394
+ ], Modal.prototype, "size", void 0);
395
+ __decorate([
396
+ n({ type: Boolean, reflect: true, attribute: 'hide-close' })
397
+ ], Modal.prototype, "hideClose", void 0);
398
+ __decorate([
399
+ n({ type: Boolean, reflect: true, attribute: 'show-loader' })
400
+ ], Modal.prototype, "showLoader", void 0);
401
+ __decorate([
402
+ n({ type: Boolean, attribute: 'no-scrim-close' })
403
+ ], Modal.prototype, "noScrimClose", void 0);
404
+ __decorate([
405
+ r()
406
+ ], Modal.prototype, "_visible", void 0);
407
+ Modal = __decorate([
408
+ IndividualComponent
409
+ ], Modal);
410
+
411
+ export { Modal };
412
+ //# sourceMappingURL=modal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal-wc\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}