@maggioli-design-system/mds-modal 3.1.0 → 3.2.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 (54) hide show
  1. package/dist/cjs/{index-90939077.js → index-d859a858.js} +217 -195
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/mds-modal.cjs.entry.js +34 -7
  4. package/dist/cjs/mds-modal.cjs.js +2 -2
  5. package/dist/collection/collection-manifest.json +1 -1
  6. package/dist/collection/common/aria.js +19 -0
  7. package/dist/collection/components/mds-modal/mds-modal.css +37 -67
  8. package/dist/collection/components/mds-modal/mds-modal.js +33 -6
  9. package/dist/collection/components/mds-modal/test/mds-modal.stories.js +8 -0
  10. package/dist/collection/dictionary/typography.js +3 -3
  11. package/dist/components/mds-modal.js +33 -6
  12. package/dist/esm/{index-5dfae565.js → index-a5a41aa8.js} +217 -195
  13. package/dist/esm/loader.js +2 -2
  14. package/dist/esm/mds-modal.entry.js +34 -7
  15. package/dist/esm/mds-modal.js +2 -2
  16. package/dist/esm/polyfills/css-shim.js +1 -1
  17. package/dist/esm-es5/index-a5a41aa8.js +2 -0
  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/mds-modal.js +1 -1
  23. package/dist/mds-modal/p-4fe02e5f.entry.js +1 -0
  24. package/dist/mds-modal/{p-4288d1a7.system.entry.js → p-52cd3b82.system.entry.js} +1 -1
  25. package/dist/mds-modal/p-76a04b9e.system.js +2 -0
  26. package/dist/mds-modal/p-931319fa.js +2 -0
  27. package/dist/mds-modal/{p-5935b9a5.system.js → p-a2cf985e.system.js} +1 -1
  28. package/dist/stats.json +36 -32
  29. package/dist/types/common/aria.d.ts +4 -0
  30. package/dist/types/components/mds-modal/test/mds-modal.stories.d.ts +1 -0
  31. package/dist/types/stencil-public-runtime.d.ts +20 -4
  32. package/dist/types/types/typography.d.ts +3 -3
  33. package/package.json +3 -3
  34. package/src/common/aria.ts +27 -0
  35. package/src/components/mds-modal/mds-modal.tsx +39 -4
  36. package/src/components/mds-modal/test/mds-modal.e2e.ts +2 -2
  37. package/src/components/mds-modal/test/mds-modal.stories.tsx +20 -0
  38. package/src/dictionary/typography.ts +3 -3
  39. package/src/fixtures/icons.json +2 -2
  40. package/src/types/typography.ts +3 -3
  41. package/www/build/mds-modal.esm.js +1 -1
  42. package/www/build/mds-modal.js +1 -1
  43. package/www/build/p-4fe02e5f.entry.js +1 -0
  44. package/www/build/{p-4288d1a7.system.entry.js → p-52cd3b82.system.entry.js} +1 -1
  45. package/www/build/p-76a04b9e.system.js +2 -0
  46. package/www/build/p-931319fa.js +2 -0
  47. package/www/build/{p-5935b9a5.system.js → p-a2cf985e.system.js} +1 -1
  48. package/dist/esm-es5/index-5dfae565.js +0 -2
  49. package/dist/mds-modal/p-19fa0f59.js +0 -2
  50. package/dist/mds-modal/p-9c47a964.system.js +0 -2
  51. package/dist/mds-modal/p-f1135a2e.entry.js +0 -1
  52. package/www/build/p-19fa0f59.js +0 -2
  53. package/www/build/p-9c47a964.system.js +0 -2
  54. package/www/build/p-f1135a2e.entry.js +0 -1
@@ -22,66 +22,18 @@ function _interopNamespace(e) {
22
22
 
23
23
  const NAMESPACE = 'mds-modal';
24
24
 
25
+ /**
26
+ * Virtual DOM patching algorithm based on Snabbdom by
27
+ * Simon Friis Vindum (@paldepind)
28
+ * Licensed under the MIT License
29
+ * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
30
+ *
31
+ * Modified for Stencil's renderer and slot projection
32
+ */
25
33
  let scopeId;
26
34
  let hostTagName;
27
35
  let isSvgMode = false;
28
36
  let queuePending = false;
29
- const win = typeof window !== 'undefined' ? window : {};
30
- const doc = win.document || { head: {} };
31
- const plt = {
32
- $flags$: 0,
33
- $resourcesUrl$: '',
34
- jmp: (h) => h(),
35
- raf: (h) => requestAnimationFrame(h),
36
- ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
37
- rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
38
- ce: (eventName, opts) => new CustomEvent(eventName, opts),
39
- };
40
- const promiseResolve = (v) => Promise.resolve(v);
41
- const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
42
- try {
43
- new CSSStyleSheet();
44
- return typeof new CSSStyleSheet().replaceSync === 'function';
45
- }
46
- catch (e) { }
47
- return false;
48
- })()
49
- ;
50
- const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
51
- if (listeners) {
52
- listeners.map(([flags, name, method]) => {
53
- const target = getHostListenerTarget(elm, flags) ;
54
- const handler = hostListenerProxy(hostRef, method);
55
- const opts = hostListenerOpts(flags);
56
- plt.ael(target, name, handler, opts);
57
- (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
58
- });
59
- }
60
- };
61
- const hostListenerProxy = (hostRef, methodName) => (ev) => {
62
- try {
63
- {
64
- if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
65
- // instance is ready, let's call it's member method for this event
66
- hostRef.$lazyInstance$[methodName](ev);
67
- }
68
- else {
69
- (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
70
- }
71
- }
72
- }
73
- catch (e) {
74
- consoleError(e);
75
- }
76
- };
77
- const getHostListenerTarget = (elm, flags) => {
78
- if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
79
- return doc;
80
- return elm;
81
- };
82
- // prettier-ignore
83
- const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
84
- const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
85
37
  const createTime = (fnName, tagName = '') => {
86
38
  {
87
39
  return () => {
@@ -96,76 +48,7 @@ const uniqueTime = (key, measureText) => {
96
48
  };
97
49
  }
98
50
  };
99
- const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
100
- const registerStyle = (scopeId, cssText, allowCS) => {
101
- let style = styles.get(scopeId);
102
- if (supportsConstructableStylesheets && allowCS) {
103
- style = (style || new CSSStyleSheet());
104
- if (typeof style === 'string') {
105
- style = cssText;
106
- }
107
- else {
108
- style.replaceSync(cssText);
109
- }
110
- }
111
- else {
112
- style = cssText;
113
- }
114
- styles.set(scopeId, style);
115
- };
116
- const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
117
- let scopeId = getScopeId(cmpMeta);
118
- const style = styles.get(scopeId);
119
- // if an element is NOT connected then getRootNode() will return the wrong root node
120
- // so the fallback is to always use the document for the root node in those cases
121
- styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
122
- if (style) {
123
- if (typeof style === 'string') {
124
- styleContainerNode = styleContainerNode.head || styleContainerNode;
125
- let appliedStyles = rootAppliedStyles.get(styleContainerNode);
126
- let styleElm;
127
- if (!appliedStyles) {
128
- rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
129
- }
130
- if (!appliedStyles.has(scopeId)) {
131
- {
132
- {
133
- styleElm = doc.createElement('style');
134
- styleElm.innerHTML = style;
135
- }
136
- styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
137
- }
138
- if (appliedStyles) {
139
- appliedStyles.add(scopeId);
140
- }
141
- }
142
- }
143
- else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
144
- styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
145
- }
146
- }
147
- return scopeId;
148
- };
149
- const attachStyles = (hostRef) => {
150
- const cmpMeta = hostRef.$cmpMeta$;
151
- const elm = hostRef.$hostElement$;
152
- const flags = cmpMeta.$flags$;
153
- const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
154
- const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
155
- if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
156
- // only required when we're NOT using native shadow dom (slot)
157
- // or this browser doesn't support native shadow dom
158
- // and this host element was NOT created with SSR
159
- // let's pick out the inner content for slot projection
160
- // create a node to represent where the original
161
- // content was first placed, which is useful later on
162
- // DOM WRITE!!
163
- elm['s-sc'] = scopeId;
164
- elm.classList.add(scopeId + '-h');
165
- }
166
- endAttachStyles();
167
- };
168
- const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
51
+ const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
169
52
  /**
170
53
  * Default style mode id
171
54
  */
@@ -254,6 +137,145 @@ const newVNode = (tag, text) => {
254
137
  };
255
138
  const Host = {};
256
139
  const isHost = (node) => node && node.$tag$ === Host;
140
+ /**
141
+ * Parse a new property value for a given property type.
142
+ *
143
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
144
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
145
+ * 1. `any`, the type given to `propValue` in the function signature
146
+ * 2. the type stored from `propType`.
147
+ *
148
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
149
+ *
150
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
151
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
152
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
153
+ * ```tsx
154
+ * <my-cmp prop-val={0}></my-cmp>
155
+ * ```
156
+ *
157
+ * HTML prop values on the other hand, will always a string
158
+ *
159
+ * @param propValue the new value to coerce to some type
160
+ * @param propType the type of the prop, expressed as a binary number
161
+ * @returns the parsed/coerced value
162
+ */
163
+ const parsePropertyValue = (propValue, propType) => {
164
+ // ensure this value is of the correct prop type
165
+ if (propValue != null && !isComplexType(propValue)) {
166
+ if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
167
+ // per the HTML spec, any string value means it is a boolean true value
168
+ // but we'll cheat here and say that the string "false" is the boolean false
169
+ return propValue === 'false' ? false : propValue === '' || !!propValue;
170
+ }
171
+ if (propType & 1 /* MEMBER_FLAGS.String */) {
172
+ // could have been passed as a number or boolean
173
+ // but we still want it as a string
174
+ return String(propValue);
175
+ }
176
+ // redundant return here for better minification
177
+ return propValue;
178
+ }
179
+ // not sure exactly what type we want
180
+ // so no need to change to a different type
181
+ return propValue;
182
+ };
183
+ const getElement = (ref) => (getHostRef(ref).$hostElement$ );
184
+ const createEvent = (ref, name, flags) => {
185
+ const elm = getElement(ref);
186
+ return {
187
+ emit: (detail) => {
188
+ return emitEvent(elm, name, {
189
+ bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
190
+ composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
191
+ cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
192
+ detail,
193
+ });
194
+ },
195
+ };
196
+ };
197
+ /**
198
+ * Helper function to create & dispatch a custom Event on a provided target
199
+ * @param elm the target of the Event
200
+ * @param name the name to give the custom Event
201
+ * @param opts options for configuring a custom Event
202
+ * @returns the custom Event
203
+ */
204
+ const emitEvent = (elm, name, opts) => {
205
+ const ev = plt.ce(name, opts);
206
+ elm.dispatchEvent(ev);
207
+ return ev;
208
+ };
209
+ const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
210
+ const registerStyle = (scopeId, cssText, allowCS) => {
211
+ let style = styles.get(scopeId);
212
+ if (supportsConstructableStylesheets && allowCS) {
213
+ style = (style || new CSSStyleSheet());
214
+ if (typeof style === 'string') {
215
+ style = cssText;
216
+ }
217
+ else {
218
+ style.replaceSync(cssText);
219
+ }
220
+ }
221
+ else {
222
+ style = cssText;
223
+ }
224
+ styles.set(scopeId, style);
225
+ };
226
+ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
227
+ let scopeId = getScopeId(cmpMeta);
228
+ const style = styles.get(scopeId);
229
+ // if an element is NOT connected then getRootNode() will return the wrong root node
230
+ // so the fallback is to always use the document for the root node in those cases
231
+ styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
232
+ if (style) {
233
+ if (typeof style === 'string') {
234
+ styleContainerNode = styleContainerNode.head || styleContainerNode;
235
+ let appliedStyles = rootAppliedStyles.get(styleContainerNode);
236
+ let styleElm;
237
+ if (!appliedStyles) {
238
+ rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
239
+ }
240
+ if (!appliedStyles.has(scopeId)) {
241
+ {
242
+ {
243
+ styleElm = doc.createElement('style');
244
+ styleElm.innerHTML = style;
245
+ }
246
+ styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
247
+ }
248
+ if (appliedStyles) {
249
+ appliedStyles.add(scopeId);
250
+ }
251
+ }
252
+ }
253
+ else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
254
+ styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
255
+ }
256
+ }
257
+ return scopeId;
258
+ };
259
+ const attachStyles = (hostRef) => {
260
+ const cmpMeta = hostRef.$cmpMeta$;
261
+ const elm = hostRef.$hostElement$;
262
+ const flags = cmpMeta.$flags$;
263
+ const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
264
+ const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
265
+ if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
266
+ // only required when we're NOT using native shadow dom (slot)
267
+ // or this browser doesn't support native shadow dom
268
+ // and this host element was NOT created with SSR
269
+ // let's pick out the inner content for slot projection
270
+ // create a node to represent where the original
271
+ // content was first placed, which is useful later on
272
+ // DOM WRITE!!
273
+ elm['s-sc'] = scopeId;
274
+ elm.classList.add(scopeId + '-h');
275
+ }
276
+ endAttachStyles();
277
+ };
278
+ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
257
279
  /**
258
280
  * Production setAccessor() function based on Preact by
259
281
  * Jason Miller (@developit)
@@ -710,32 +732,6 @@ const renderVdom = (hostRef, renderFnResults) => {
710
732
  // synchronous patch
711
733
  patch(oldVNode, rootVnode);
712
734
  };
713
- const getElement = (ref) => (getHostRef(ref).$hostElement$ );
714
- const createEvent = (ref, name, flags) => {
715
- const elm = getElement(ref);
716
- return {
717
- emit: (detail) => {
718
- return emitEvent(elm, name, {
719
- bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
720
- composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
721
- cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
722
- detail,
723
- });
724
- },
725
- };
726
- };
727
- /**
728
- * Helper function to create & dispatch a custom Event on a provided target
729
- * @param elm the target of the Event
730
- * @param name the name to give the custom Event
731
- * @param opts options for configuring a custom Event
732
- * @returns the custom Event
733
- */
734
- const emitEvent = (elm, name, opts) => {
735
- const ev = plt.ce(name, opts);
736
- elm.dispatchEvent(ev);
737
- return ev;
738
- };
739
735
  const attachToAncestor = (hostRef, ancestorComponent) => {
740
736
  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
741
737
  ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
@@ -904,49 +900,6 @@ const then = (promise, thenFn) => {
904
900
  };
905
901
  const addHydratedFlag = (elm) => elm.classList.add('hydrated')
906
902
  ;
907
- /**
908
- * Parse a new property value for a given property type.
909
- *
910
- * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
911
- * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
912
- * 1. `any`, the type given to `propValue` in the function signature
913
- * 2. the type stored from `propType`.
914
- *
915
- * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
916
- *
917
- * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
918
- * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
919
- * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
920
- * ```tsx
921
- * <my-cmp prop-val={0}></my-cmp>
922
- * ```
923
- *
924
- * HTML prop values on the other hand, will always a string
925
- *
926
- * @param propValue the new value to coerce to some type
927
- * @param propType the type of the prop, expressed as a binary number
928
- * @returns the parsed/coerced value
929
- */
930
- const parsePropertyValue = (propValue, propType) => {
931
- // ensure this value is of the correct prop type
932
- if (propValue != null && !isComplexType(propValue)) {
933
- if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
934
- // per the HTML spec, any string value means it is a boolean true value
935
- // but we'll cheat here and say that the string "false" is the boolean false
936
- return propValue === 'false' ? false : propValue === '' || !!propValue;
937
- }
938
- if (propType & 1 /* MEMBER_FLAGS.String */) {
939
- // could have been passed as a number or boolean
940
- // but we still want it as a string
941
- return String(propValue);
942
- }
943
- // redundant return here for better minification
944
- return propValue;
945
- }
946
- // not sure exactly what type we want
947
- // so no need to change to a different type
948
- return propValue;
949
- };
950
903
  const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
951
904
  const setValue = (ref, propName, newVal, cmpMeta) => {
952
905
  // check our new property value against our internal value
@@ -990,6 +943,16 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
990
943
  }
991
944
  }
992
945
  };
946
+ /**
947
+ * Attach a series of runtime constructs to a compiled Stencil component
948
+ * constructor, including getters and setters for the `@Prop` and `@State`
949
+ * decorators, callbacks for when attributes change, and so on.
950
+ *
951
+ * @param Cstr the constructor for a component that we need to process
952
+ * @param cmpMeta metadata collected previously about the component
953
+ * @param flags a number used to store a series of bit flags
954
+ * @returns a reference to the same constructor passed in (but now mutated)
955
+ */
993
956
  const proxyComponent = (Cstr, cmpMeta, flags) => {
994
957
  if (cmpMeta.$members$) {
995
958
  if (Cstr.watchers) {
@@ -1213,12 +1176,16 @@ const connectedCallback = (elm) => {
1213
1176
  const disconnectedCallback = (elm) => {
1214
1177
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1215
1178
  const hostRef = getHostRef(elm);
1179
+ const instance = hostRef.$lazyInstance$ ;
1216
1180
  {
1217
1181
  if (hostRef.$rmListeners$) {
1218
1182
  hostRef.$rmListeners$.map((rmListener) => rmListener());
1219
1183
  hostRef.$rmListeners$ = undefined;
1220
1184
  }
1221
1185
  }
1186
+ {
1187
+ safeCall(instance, 'disconnectedCallback');
1188
+ }
1222
1189
  }
1223
1190
  };
1224
1191
  const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -1319,6 +1286,40 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1319
1286
  // Fallback appLoad event
1320
1287
  endBootstrap();
1321
1288
  };
1289
+ const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
1290
+ if (listeners) {
1291
+ listeners.map(([flags, name, method]) => {
1292
+ const target = getHostListenerTarget(elm, flags) ;
1293
+ const handler = hostListenerProxy(hostRef, method);
1294
+ const opts = hostListenerOpts(flags);
1295
+ plt.ael(target, name, handler, opts);
1296
+ (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
1297
+ });
1298
+ }
1299
+ };
1300
+ const hostListenerProxy = (hostRef, methodName) => (ev) => {
1301
+ try {
1302
+ {
1303
+ if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
1304
+ // instance is ready, let's call it's member method for this event
1305
+ hostRef.$lazyInstance$[methodName](ev);
1306
+ }
1307
+ else {
1308
+ (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
1309
+ }
1310
+ }
1311
+ }
1312
+ catch (e) {
1313
+ consoleError(e);
1314
+ }
1315
+ };
1316
+ const getHostListenerTarget = (elm, flags) => {
1317
+ if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
1318
+ return doc;
1319
+ return elm;
1320
+ };
1321
+ // prettier-ignore
1322
+ const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
1322
1323
  const hostRefs = /*@__PURE__*/ new WeakMap();
1323
1324
  const getHostRef = (ref) => hostRefs.get(ref);
1324
1325
  const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1362,6 +1363,27 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1362
1363
  }, consoleError);
1363
1364
  };
1364
1365
  const styles = /*@__PURE__*/ new Map();
1366
+ const win = typeof window !== 'undefined' ? window : {};
1367
+ const doc = win.document || { head: {} };
1368
+ const plt = {
1369
+ $flags$: 0,
1370
+ $resourcesUrl$: '',
1371
+ jmp: (h) => h(),
1372
+ raf: (h) => requestAnimationFrame(h),
1373
+ ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
1374
+ rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
1375
+ ce: (eventName, opts) => new CustomEvent(eventName, opts),
1376
+ };
1377
+ const promiseResolve = (v) => Promise.resolve(v);
1378
+ const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
1379
+ try {
1380
+ new CSSStyleSheet();
1381
+ return typeof new CSSStyleSheet().replaceSync === 'function';
1382
+ }
1383
+ catch (e) { }
1384
+ return false;
1385
+ })()
1386
+ ;
1365
1387
  const queueDomReads = [];
1366
1388
  const queueDomWrites = [];
1367
1389
  const queueTask = (queue, write) => (cb) => {
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-90939077.js');
5
+ const index = require('./index-d859a858.js');
6
6
 
7
7
  /*
8
- Stencil Client Patch Esm v2.18.0 | MIT Licensed | https://stenciljs.com
8
+ Stencil Client Patch Esm v2.19.3 | MIT Licensed | https://stenciljs.com
9
9
  */
10
10
  const patchEsm = () => {
11
11
  return index.promiseResolve();
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-90939077.js');
5
+ const index = require('./index-d859a858.js');
6
6
 
7
7
  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
8
8
 
@@ -18,13 +18,14 @@ const MdsModal = class {
18
18
  this.top = null;
19
19
  this.bottom = null;
20
20
  this.animationState = 'intro';
21
- /**
22
- * Specifies the animation position of the modal window
23
- */
24
- this.position = null;
25
21
  this.animationName = (customState = null, customPosition = null) => {
26
22
  return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
27
23
  };
24
+ this.checkKeyboardEscape = (event) => {
25
+ if (event.code === 'Escape') {
26
+ this.close.emit();
27
+ }
28
+ };
28
29
  this.closeModal = (e = null) => {
29
30
  var _a;
30
31
  if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
@@ -35,6 +36,9 @@ const MdsModal = class {
35
36
  this.close.emit();
36
37
  }
37
38
  };
39
+ this.stateOpened = undefined;
40
+ this.opened = undefined;
41
+ this.position = null;
38
42
  }
39
43
  componentWillLoad() {
40
44
  this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
@@ -47,6 +51,10 @@ const MdsModal = class {
47
51
  if (this.position === null) {
48
52
  this.position = 'right';
49
53
  }
54
+ if (this.window) {
55
+ const modal = this.hostElement.querySelector('[slot="window"]');
56
+ modal.setAttribute('role', 'modal');
57
+ }
50
58
  }
51
59
  componentWillRender() {
52
60
  this.animationState = this.opened ? 'intro' : 'outro';
@@ -59,6 +67,14 @@ const MdsModal = class {
59
67
  this.hostElement.classList.add(this.animationName(this.animationState));
60
68
  window.clearTimeout(this.animationDeelay);
61
69
  }, 500);
70
+ if (this.opened) {
71
+ this.addKeyboardEscapeListener();
72
+ return;
73
+ }
74
+ this.removeKeyboardEscapeListener();
75
+ }
76
+ disconnectedCallback() {
77
+ this.removeKeyboardEscapeListener();
62
78
  }
63
79
  positionChange(_newValue, oldValue) {
64
80
  window.clearTimeout(this.animationDeelay);
@@ -66,19 +82,30 @@ const MdsModal = class {
66
82
  this.hostElement.classList.remove(this.animationName('intro', oldValue));
67
83
  this.hostElement.classList.remove(this.animationName('outro', oldValue));
68
84
  }
85
+ addKeyboardEscapeListener() {
86
+ window.addEventListener('keydown', this.checkKeyboardEscape.bind(this));
87
+ }
88
+ removeKeyboardEscapeListener() {
89
+ window.removeEventListener('keydown', this.checkKeyboardEscape.bind(this));
90
+ }
69
91
  openedChange(newValue) {
70
92
  this.stateOpened = newValue;
71
93
  window.clearTimeout(this.animationDeelay);
94
+ if (newValue) {
95
+ this.addKeyboardEscapeListener();
96
+ return;
97
+ }
98
+ this.removeKeyboardEscapeListener();
72
99
  }
73
100
  onCloseListener() {
74
101
  this.opened = false;
75
102
  }
76
103
  render() {
77
- return (index.h(index.Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
104
+ return (index.h(index.Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
78
105
  ?
79
106
  index.h("slot", { name: "window" })
80
107
  :
81
- index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`) }, this.top &&
108
+ index.h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog" }, this.top &&
82
109
  index.h("slot", { name: "top" }), index.h("slot", null), this.bottom &&
83
110
  index.h("slot", { name: "bottom" })), !this.window && index.h("i", { innerHTML: miBaselineClose, class: "svg close" })));
84
111
  }
@@ -1,9 +1,9 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-90939077.js');
3
+ const index = require('./index-d859a858.js');
4
4
 
5
5
  /*
6
- Stencil Client Patch Browser v2.18.0 | MIT Licensed | https://stenciljs.com
6
+ Stencil Client Patch Browser v2.19.3 | MIT Licensed | https://stenciljs.com
7
7
  */
8
8
  const patchBrowser = () => {
9
9
  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-modal.cjs.js', document.baseURI).href));
@@ -4,7 +4,7 @@
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "2.18.0",
7
+ "version": "2.19.3",
8
8
  "typescriptVersion": "4.7.4"
9
9
  },
10
10
  "collections": [],
@@ -0,0 +1,19 @@
1
+ const hash = (s) => {
2
+ let i, h;
3
+ for (i = 0, h = 0; i < s.length; i++) {
4
+ h = Math.imul(31, h) + s.charCodeAt(i) | 0;
5
+ }
6
+ return h.toString();
7
+ };
8
+ const unslugName = (name) => {
9
+ return name.split('/').slice(-1).pop().replace(/-/g, ' ');
10
+ };
11
+ const setAttributeIfEmpty = (element, attribute, value) => {
12
+ if (element.hasAttribute(attribute)) {
13
+ return element.getAttribute(attribute);
14
+ }
15
+ element.setAttribute(attribute, value);
16
+ return value;
17
+ };
18
+ const hashValue = (value) => `${value}-${hash(value)}`;
19
+ export { unslugName, setAttributeIfEmpty, hashValue, };