@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.
- package/dist/cjs/{index-90939077.js → index-d859a858.js} +217 -195
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mds-modal.cjs.entry.js +34 -7
- package/dist/cjs/mds-modal.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/common/aria.js +19 -0
- package/dist/collection/components/mds-modal/mds-modal.css +37 -67
- package/dist/collection/components/mds-modal/mds-modal.js +33 -6
- package/dist/collection/components/mds-modal/test/mds-modal.stories.js +8 -0
- package/dist/collection/dictionary/typography.js +3 -3
- package/dist/components/mds-modal.js +33 -6
- package/dist/esm/{index-5dfae565.js → index-a5a41aa8.js} +217 -195
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mds-modal.entry.js +34 -7
- package/dist/esm/mds-modal.js +2 -2
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm-es5/index-a5a41aa8.js +2 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mds-modal.entry.js +1 -1
- package/dist/esm-es5/mds-modal.js +1 -1
- package/dist/mds-modal/mds-modal.esm.js +1 -1
- package/dist/mds-modal/mds-modal.js +1 -1
- package/dist/mds-modal/p-4fe02e5f.entry.js +1 -0
- package/dist/mds-modal/{p-4288d1a7.system.entry.js → p-52cd3b82.system.entry.js} +1 -1
- package/dist/mds-modal/p-76a04b9e.system.js +2 -0
- package/dist/mds-modal/p-931319fa.js +2 -0
- package/dist/mds-modal/{p-5935b9a5.system.js → p-a2cf985e.system.js} +1 -1
- package/dist/stats.json +36 -32
- package/dist/types/common/aria.d.ts +4 -0
- package/dist/types/components/mds-modal/test/mds-modal.stories.d.ts +1 -0
- package/dist/types/stencil-public-runtime.d.ts +20 -4
- package/dist/types/types/typography.d.ts +3 -3
- package/package.json +3 -3
- package/src/common/aria.ts +27 -0
- package/src/components/mds-modal/mds-modal.tsx +39 -4
- package/src/components/mds-modal/test/mds-modal.e2e.ts +2 -2
- package/src/components/mds-modal/test/mds-modal.stories.tsx +20 -0
- package/src/dictionary/typography.ts +3 -3
- package/src/fixtures/icons.json +2 -2
- package/src/types/typography.ts +3 -3
- package/www/build/mds-modal.esm.js +1 -1
- package/www/build/mds-modal.js +1 -1
- package/www/build/p-4fe02e5f.entry.js +1 -0
- package/www/build/{p-4288d1a7.system.entry.js → p-52cd3b82.system.entry.js} +1 -1
- package/www/build/p-76a04b9e.system.js +2 -0
- package/www/build/p-931319fa.js +2 -0
- package/www/build/{p-5935b9a5.system.js → p-a2cf985e.system.js} +1 -1
- package/dist/esm-es5/index-5dfae565.js +0 -2
- package/dist/mds-modal/p-19fa0f59.js +0 -2
- package/dist/mds-modal/p-9c47a964.system.js +0 -2
- package/dist/mds-modal/p-f1135a2e.entry.js +0 -1
- package/www/build/p-19fa0f59.js +0 -2
- package/www/build/p-9c47a964.system.js +0 -2
- 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
|
|
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) => {
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-d859a858.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
|
-
Stencil Client Patch Esm v2.
|
|
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-
|
|
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-
|
|
3
|
+
const index = require('./index-d859a858.js');
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
|
-
Stencil Client Patch Browser v2.
|
|
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));
|
|
@@ -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, };
|