@maggioli-design-system/mds-modal 4.7.1 → 4.7.3
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-1c3a970e.js → index-b3e2062a.js} +51 -31
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mds-modal.cjs.entry.js +130 -130
- package/dist/cjs/mds-modal.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/common/aria.js +18 -18
- package/dist/collection/common/keyboard-manager.js +38 -38
- package/dist/collection/common/unit.js +7 -7
- package/dist/collection/components/mds-modal/mds-modal.css +7 -30
- package/dist/collection/components/mds-modal/mds-modal.js +188 -188
- package/dist/collection/components/mds-modal/meta/dictionary.js +5 -5
- package/dist/collection/components/mds-modal/test/mds-modal.e2e.js +34 -34
- package/dist/collection/components/mds-modal/test/mds-modal.stories.js +16 -16
- package/dist/collection/dictionary/autocomplete.js +56 -56
- package/dist/collection/dictionary/button.js +19 -19
- package/dist/collection/dictionary/color.js +14 -14
- package/dist/collection/dictionary/floating-ui.js +14 -14
- package/dist/collection/dictionary/input.js +31 -15
- package/dist/collection/dictionary/loading.js +2 -2
- package/dist/collection/dictionary/typography.js +46 -46
- package/dist/collection/dictionary/variant.js +54 -54
- package/dist/collection/fixtures/cities.js +107 -107
- package/dist/components/mds-modal.d.ts +2 -2
- package/dist/components/mds-modal.js +150 -150
- package/dist/documentation.d.ts +1 -21
- package/dist/documentation.json +2 -2
- package/dist/esm/{index-a33ffd58.js → index-fd30d325.js} +51 -31
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mds-modal.entry.js +130 -130
- package/dist/esm/mds-modal.js +3 -3
- package/dist/esm-es5/index-fd30d325.js +1 -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 +15 -15
- package/dist/mds-modal/p-14f0bf74.system.js +2 -0
- package/dist/mds-modal/p-59a0095c.system.entry.js +1 -0
- package/dist/mds-modal/p-6086db8a.entry.js +1 -0
- package/dist/mds-modal/{p-7ead5b8b.system.js → p-88c57c56.system.js} +1 -1
- package/dist/mds-modal/p-aff993b4.js +2 -0
- package/dist/stats.json +37 -34
- package/dist/types/common/keyboard-manager.d.ts +9 -9
- package/dist/types/components/mds-modal/test/mds-modal.stories.d.ts +20 -20
- package/dist/types/dictionary/input.d.ts +2 -1
- package/dist/types/interface/input-value.d.ts +1 -1
- package/dist/types/stencil-public-runtime.d.ts +8 -0
- package/documentation.json +14 -4
- package/package.json +4 -4
- package/src/components/mds-modal/css/mds-modal-animate-bottom.css +2 -2
- package/src/components/mds-modal/css/mds-modal-animate-center.css +2 -2
- package/src/components/mds-modal/css/mds-modal-animate-top.css +2 -2
- package/src/components/mds-modal/mds-modal.css +2 -2
- package/src/dictionary/input.ts +18 -0
- package/src/fixtures/icons.json +3 -0
- package/src/fixtures/iconsauce.json +3 -0
- package/www/build/mds-modal.esm.js +1 -1
- package/www/build/mds-modal.js +15 -15
- package/www/build/p-14f0bf74.system.js +2 -0
- package/www/build/p-59a0095c.system.entry.js +1 -0
- package/www/build/p-6086db8a.entry.js +1 -0
- package/www/build/{p-7ead5b8b.system.js → p-88c57c56.system.js} +1 -1
- package/www/build/p-aff993b4.js +2 -0
- package/dist/esm-es5/index-a33ffd58.js +0 -1
- package/dist/mds-modal/p-506f8ff7.system.js +0 -2
- package/dist/mds-modal/p-602c50be.js +0 -2
- package/dist/mds-modal/p-a0636f54.system.entry.js +0 -1
- package/dist/mds-modal/p-c5a84e4d.entry.js +0 -1
- package/www/build/p-506f8ff7.system.js +0 -2
- package/www/build/p-602c50be.js +0 -2
- package/www/build/p-a0636f54.system.entry.js +0 -1
- package/www/build/p-c5a84e4d.entry.js +0 -1
|
@@ -402,7 +402,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
402
402
|
elm[memberName] = newValue;
|
|
403
403
|
}
|
|
404
404
|
}
|
|
405
|
-
catch (e) {
|
|
405
|
+
catch (e) {
|
|
406
|
+
/**
|
|
407
|
+
* in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
|
|
408
|
+
*/
|
|
409
|
+
}
|
|
406
410
|
}
|
|
407
411
|
if (newValue == null || newValue === false) {
|
|
408
412
|
if (newValue !== false || elm.getAttribute(memberName) === '') {
|
|
@@ -421,6 +425,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
421
425
|
}
|
|
422
426
|
};
|
|
423
427
|
const parseClassListRegex = /\s/;
|
|
428
|
+
/**
|
|
429
|
+
* Parsed a string of classnames into an array
|
|
430
|
+
* @param value className string, e.g. "foo bar baz"
|
|
431
|
+
* @returns list of classes, e.g. ["foo", "bar", "baz"]
|
|
432
|
+
*/
|
|
424
433
|
const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
|
|
425
434
|
const CAPTURE_EVENT_SUFFIX = 'Capture';
|
|
426
435
|
const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
|
|
@@ -490,6 +499,9 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
490
499
|
}
|
|
491
500
|
}
|
|
492
501
|
}
|
|
502
|
+
// This needs to always happen so we can hide nodes that are projected
|
|
503
|
+
// to another component but don't end up in a slot
|
|
504
|
+
elm['s-hn'] = hostTagName;
|
|
493
505
|
return elm;
|
|
494
506
|
};
|
|
495
507
|
/**
|
|
@@ -613,8 +625,9 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
|
|
|
613
625
|
* @param oldCh the old children of the parent node
|
|
614
626
|
* @param newVNode the new VNode which will replace the parent
|
|
615
627
|
* @param newCh the new children of the parent node
|
|
628
|
+
* @param isInitialRender whether or not this is the first render of the vdom
|
|
616
629
|
*/
|
|
617
|
-
const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
630
|
+
const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
|
|
618
631
|
let oldStartIdx = 0;
|
|
619
632
|
let newStartIdx = 0;
|
|
620
633
|
let oldEndIdx = oldCh.length - 1;
|
|
@@ -638,25 +651,25 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
638
651
|
else if (newEndVnode == null) {
|
|
639
652
|
newEndVnode = newCh[--newEndIdx];
|
|
640
653
|
}
|
|
641
|
-
else if (isSameVnode(oldStartVnode, newStartVnode)) {
|
|
654
|
+
else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
|
|
642
655
|
// if the start nodes are the same then we should patch the new VNode
|
|
643
656
|
// onto the old one, and increment our `newStartIdx` and `oldStartIdx`
|
|
644
657
|
// indices to reflect that. We don't need to move any DOM Nodes around
|
|
645
658
|
// since things are matched up in order.
|
|
646
|
-
patch(oldStartVnode, newStartVnode);
|
|
659
|
+
patch(oldStartVnode, newStartVnode, isInitialRender);
|
|
647
660
|
oldStartVnode = oldCh[++oldStartIdx];
|
|
648
661
|
newStartVnode = newCh[++newStartIdx];
|
|
649
662
|
}
|
|
650
|
-
else if (isSameVnode(oldEndVnode, newEndVnode)) {
|
|
663
|
+
else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
|
|
651
664
|
// likewise, if the end nodes are the same we patch new onto old and
|
|
652
665
|
// decrement our end indices, and also likewise in this case we don't
|
|
653
666
|
// need to move any DOM Nodes.
|
|
654
|
-
patch(oldEndVnode, newEndVnode);
|
|
667
|
+
patch(oldEndVnode, newEndVnode, isInitialRender);
|
|
655
668
|
oldEndVnode = oldCh[--oldEndIdx];
|
|
656
669
|
newEndVnode = newCh[--newEndIdx];
|
|
657
670
|
}
|
|
658
|
-
else if (isSameVnode(oldStartVnode, newEndVnode)) {
|
|
659
|
-
patch(oldStartVnode, newEndVnode);
|
|
671
|
+
else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
|
|
672
|
+
patch(oldStartVnode, newEndVnode, isInitialRender);
|
|
660
673
|
// We need to move the element for `oldStartVnode` into a position which
|
|
661
674
|
// will be appropriate for `newEndVnode`. For this we can use
|
|
662
675
|
// `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
|
|
@@ -678,8 +691,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
678
691
|
oldStartVnode = oldCh[++oldStartIdx];
|
|
679
692
|
newEndVnode = newCh[--newEndIdx];
|
|
680
693
|
}
|
|
681
|
-
else if (isSameVnode(oldEndVnode, newStartVnode)) {
|
|
682
|
-
patch(oldEndVnode, newStartVnode);
|
|
694
|
+
else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
|
|
695
|
+
patch(oldEndVnode, newStartVnode, isInitialRender);
|
|
683
696
|
// We've already checked above if `oldStartVnode` and `newStartVnode` are
|
|
684
697
|
// the same node, so since we're here we know that they are not. Thus we
|
|
685
698
|
// can move the element for `oldEndVnode` _before_ the element for
|
|
@@ -733,9 +746,10 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
733
746
|
*
|
|
734
747
|
* @param leftVNode the first VNode to check
|
|
735
748
|
* @param rightVNode the second VNode to check
|
|
749
|
+
* @param isInitialRender whether or not this is the first render of the vdom
|
|
736
750
|
* @returns whether they're equal or not
|
|
737
751
|
*/
|
|
738
|
-
const isSameVnode = (leftVNode, rightVNode) => {
|
|
752
|
+
const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
|
|
739
753
|
// compare if two vnode to see if they're "technically" the same
|
|
740
754
|
// need to have the same element tag, and same key to be the same
|
|
741
755
|
if (leftVNode.$tag$ === rightVNode.$tag$) {
|
|
@@ -750,8 +764,9 @@ const isSameVnode = (leftVNode, rightVNode) => {
|
|
|
750
764
|
*
|
|
751
765
|
* @param oldVNode an old VNode whose DOM element and children we want to update
|
|
752
766
|
* @param newVNode a new VNode representing an updated version of the old one
|
|
767
|
+
* @param isInitialRender whether or not this is the first render of the vdom
|
|
753
768
|
*/
|
|
754
|
-
const patch = (oldVNode, newVNode) => {
|
|
769
|
+
const patch = (oldVNode, newVNode, isInitialRender = false) => {
|
|
755
770
|
const elm = (newVNode.$elm$ = oldVNode.$elm$);
|
|
756
771
|
const oldChildren = oldVNode.$children$;
|
|
757
772
|
const newChildren = newVNode.$children$;
|
|
@@ -771,7 +786,7 @@ const patch = (oldVNode, newVNode) => {
|
|
|
771
786
|
if (oldChildren !== null && newChildren !== null) {
|
|
772
787
|
// looks like there's child vnodes for both the old and new vnodes
|
|
773
788
|
// so we need to call `updateChildren` to reconcile them
|
|
774
|
-
updateChildren(elm, oldChildren, newVNode, newChildren);
|
|
789
|
+
updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
|
|
775
790
|
}
|
|
776
791
|
else if (newChildren !== null) {
|
|
777
792
|
// no old child vnodes, but there are new child vnodes to add
|
|
@@ -850,7 +865,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
|
|
|
850
865
|
scopeId = hostElm['s-sc'];
|
|
851
866
|
}
|
|
852
867
|
// synchronous patch
|
|
853
|
-
patch(oldVNode, rootVnode);
|
|
868
|
+
patch(oldVNode, rootVnode, isInitialLoad);
|
|
854
869
|
};
|
|
855
870
|
const attachToAncestor = (hostRef, ancestorComponent) => {
|
|
856
871
|
if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
|
|
@@ -1164,13 +1179,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
1164
1179
|
*/
|
|
1165
1180
|
const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
1166
1181
|
var _a;
|
|
1182
|
+
const prototype = Cstr.prototype;
|
|
1167
1183
|
if (cmpMeta.$members$) {
|
|
1168
1184
|
if (Cstr.watchers) {
|
|
1169
1185
|
cmpMeta.$watchers$ = Cstr.watchers;
|
|
1170
1186
|
}
|
|
1171
1187
|
// It's better to have a const than two Object.entries()
|
|
1172
1188
|
const members = Object.entries(cmpMeta.$members$);
|
|
1173
|
-
const prototype = Cstr.prototype;
|
|
1174
1189
|
members.map(([memberName, [memberFlags]]) => {
|
|
1175
1190
|
if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
|
|
1176
1191
|
((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
|
|
@@ -1193,6 +1208,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1193
1208
|
const attrNameToPropName = new Map();
|
|
1194
1209
|
prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
|
|
1195
1210
|
plt.jmp(() => {
|
|
1211
|
+
var _a;
|
|
1196
1212
|
const propName = attrNameToPropName.get(attrName);
|
|
1197
1213
|
// In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
|
|
1198
1214
|
// in the case where an attribute was set inline.
|
|
@@ -1248,11 +1264,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1248
1264
|
// 1. The instance is ready
|
|
1249
1265
|
// 2. The watchers are ready
|
|
1250
1266
|
// 3. The value has changed
|
|
1251
|
-
if (
|
|
1267
|
+
if (flags &&
|
|
1268
|
+
!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
|
|
1252
1269
|
flags & 128 /* HOST_FLAGS.isWatchReady */ &&
|
|
1253
1270
|
newValue !== oldValue) {
|
|
1254
1271
|
const instance = hostRef.$lazyInstance$ ;
|
|
1255
|
-
const entry = cmpMeta.$watchers$[attrName];
|
|
1272
|
+
const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
|
|
1256
1273
|
entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
|
|
1257
1274
|
if (instance[callbackName] != null) {
|
|
1258
1275
|
instance[callbackName].call(instance, newValue, oldValue, attrName);
|
|
@@ -1274,10 +1291,11 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1274
1291
|
...members
|
|
1275
1292
|
.filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
|
|
1276
1293
|
.map(([propName, m]) => {
|
|
1294
|
+
var _a;
|
|
1277
1295
|
const attrName = m[1] || propName;
|
|
1278
1296
|
attrNameToPropName.set(attrName, propName);
|
|
1279
1297
|
if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
|
|
1280
|
-
cmpMeta.$attrsToReflect
|
|
1298
|
+
(_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
|
|
1281
1299
|
}
|
|
1282
1300
|
return attrName;
|
|
1283
1301
|
}),
|
|
@@ -1550,12 +1568,14 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1550
1568
|
// If we have styles, add them to the DOM
|
|
1551
1569
|
if (dataStyles.innerHTML.length) {
|
|
1552
1570
|
dataStyles.setAttribute('data-styles', '');
|
|
1553
|
-
head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
|
|
1554
1571
|
// Apply CSP nonce to the style tag if it exists
|
|
1555
1572
|
const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
|
|
1556
1573
|
if (nonce != null) {
|
|
1557
1574
|
dataStyles.setAttribute('nonce', nonce);
|
|
1558
1575
|
}
|
|
1576
|
+
// Insert the styles into the document head
|
|
1577
|
+
// NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
|
|
1578
|
+
head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
|
|
1559
1579
|
}
|
|
1560
1580
|
// Process deferred connectedCallbacks now all components have been registered
|
|
1561
1581
|
isBootstrapping = false;
|
|
@@ -1668,19 +1688,19 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
1668
1688
|
return module[exportName];
|
|
1669
1689
|
}
|
|
1670
1690
|
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1691
|
+
if (!hmrVersionId || !BUILD.hotModuleReplacement) {
|
|
1692
|
+
const processMod = importedModule => {
|
|
1693
|
+
cmpModules.set(bundleId, importedModule);
|
|
1694
|
+
return importedModule[exportName];
|
|
1695
|
+
}
|
|
1696
|
+
switch(bundleId) {
|
|
1697
|
+
|
|
1698
|
+
case 'mds-modal':
|
|
1699
|
+
return import(
|
|
1700
|
+
/* webpackMode: "lazy" */
|
|
1701
|
+
'./mds-modal.entry.js').then(processMod, consoleError);
|
|
1702
|
+
}
|
|
1675
1703
|
}
|
|
1676
|
-
switch(bundleId) {
|
|
1677
|
-
|
|
1678
|
-
case 'mds-modal':
|
|
1679
|
-
return import(
|
|
1680
|
-
/* webpackMode: "lazy" */
|
|
1681
|
-
'./mds-modal.entry.js').then(processMod, consoleError);
|
|
1682
|
-
}
|
|
1683
|
-
}
|
|
1684
1704
|
return import(
|
|
1685
1705
|
/* @vite-ignore */
|
|
1686
1706
|
/* webpackInclude: /\.entry\.js$/ */
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { b as bootstrapLazy } from './index-fd30d325.js';
|
|
2
|
+
export { s as setNonce } from './index-fd30d325.js';
|
|
3
3
|
|
|
4
4
|
const defineCustomElements = (win, options) => {
|
|
5
5
|
if (typeof window === 'undefined') return undefined;
|
|
@@ -1,144 +1,144 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fd30d325.js';
|
|
2
2
|
|
|
3
|
-
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<
|
|
3
|
+
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)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
4
4
|
|
|
5
5
|
const miBaselineClose = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>`;
|
|
6
6
|
|
|
7
7
|
class KeyboardManager {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
8
|
+
constructor() {
|
|
9
|
+
this.elements = [];
|
|
10
|
+
this.handleClickBehaviorDispatchEvent = (event) => {
|
|
11
|
+
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
12
|
+
event.target.click();
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
this.handleEscapeBehaviorDispatchEvent = (event) => {
|
|
16
|
+
if (event.code === 'Escape' && this.escapeCallback) {
|
|
17
|
+
this.escapeCallback();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
this.addElement = (el, name = 'element') => {
|
|
21
|
+
this.elements[name] = el;
|
|
22
|
+
};
|
|
23
|
+
this.attachClickBehavior = (name = 'element') => {
|
|
24
|
+
if (this.elements[name]) {
|
|
25
|
+
this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
this.detachClickBehavior = (name = 'element') => {
|
|
29
|
+
if (this.elements[name]) {
|
|
30
|
+
this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
this.attachEscapeBehavior = (callBack) => {
|
|
34
|
+
this.escapeCallback = callBack;
|
|
35
|
+
if (window !== undefined) {
|
|
36
|
+
window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
this.detachEscapeBehavior = () => {
|
|
40
|
+
this.escapeCallback = () => { return; };
|
|
41
|
+
if (window !== undefined) {
|
|
42
|
+
window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
const mdsModalCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@tailwind components; @tailwind utilities; .svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.fixed{position:fixed}.absolute{position:absolute}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.ml-auto{margin-left:auto}.flex{display:-ms-flexbox;display:flex}.w-16{width:4rem}.min-w-0{min-width:0px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.items-center{-ms-flex-align:center;align-items:center}.gap-4{gap:1rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-tone-neutral-09{--tw-border-opacity:1;border-color:rgb(var(--tone-neutral-09) / var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.p-4{padding:1rem}.p-8{padding:2rem}.text-tone-neutral-02{--tw-text-opacity:1;color:rgb(var(--tone-neutral-02) / var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgb(var(--tone-neutral-04) / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-overflow:auto;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-ms-flex-align:center;align-items:center;background-color:rgba(var(--mds-modal-overlay-color) / 0);display:-ms-flexbox;display:flex;fill:rgb(var(--tone-neutral));inset:0;-ms-flex-pack:center;justify-content:center;-webkit-perspective:600px;perspective:600px;pointer-events:none;position:fixed;z-index:var(--mds-modal-z-index, 1000)}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.to-bottom-opened),:host(.to-center-opened),:host(.to-left-opened),:host(.to-right-opened),:host(.to-top-opened){-webkit-transition-duration:500ms;transition-duration:500ms;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}.close{top:0px;height:2.25rem;width:2.25rem;border-radius:9999px;font-size:2.25rem;line-height:2.5rem;opacity:0;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);cursor:pointer;fill:inherit;position:absolute;-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg);-webkit-transform-origin:center;transform-origin:center;-webkit-transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, transform;transition-property:opacity, outline, outline-offset, transform, -webkit-transform}.window{height:100%;gap:0px;background-color:var(--mds-modal-window-background);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);display:grid;grid-template-rows:1fr;max-width:calc(100vw - 80px);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.to-bottom){padding:2rem}@media (max-width: 767px){:host(.to-bottom){padding:1rem}}:host(.to-bottom){-ms-flex-pack:center;justify-content:center}:host(.to-bottom) .window,:host(.to-bottom)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-bottom-intro) .window,:host(.to-bottom-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-bottom-opened.to-bottom-outro) .window,:host(.to-bottom-opened.to-bottom-outro)>::slotted([slot=\"window\"]),:host(.to-bottom-opened) .window,:host(.to-bottom-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-bottom-outro) .window,:host(.to-bottom-outro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.to-center){padding:2rem}@media (max-width: 767px){:host(.to-center){padding:1rem}}:host(.to-center){-ms-flex-pack:center;justify-content:center}:host(.to-center) .window,:host(.to-center)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-center-intro) .window,:host(.to-center-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-center-opened.to-center-outro) .window,:host(.to-center-opened.to-center-outro)>::slotted([slot=\"window\"]),:host(.to-center-opened) .window,:host(.to-center-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-center-outro) .window,:host(.to-center-outro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.to-left){-ms-flex-pack:start;justify-content:flex-start}:host(.to-left) .window,:host(.to-left)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-left-intro) .window,:host(.to-left-intro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.to-left-opened.to-left-outro) .window,:host(.to-left-opened.to-left-outro)>::slotted([slot=\"window\"]),:host(.to-left-opened) .window,:host(.to-left-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.to-left-opened) .close,:host(.to-left-opened.to-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.to-left-outro) .window,:host(.to-left-outro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.to-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.to-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.to-right){-ms-flex-pack:end;justify-content:flex-end}:host(.to-right) .window,:host(.to-right)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-right-intro) .window,:host(.to-right-intro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.to-right-opened.to-right-outro) .window,:host(.to-right-opened.to-right-outro)>::slotted([slot=\"window\"]),:host(.to-right-opened) .window,:host(.to-right-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.to-right-opened) .close,:host(.to-right-opened.to-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.to-right-outro) .window,:host(.to-right-outro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.to-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.to-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.to-top){padding:2rem}@media (max-width: 767px){:host(.to-top){padding:1rem}}:host(.to-top){-ms-flex-pack:center;justify-content:center}:host(.to-top) .window,:host(.to-top)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-top-intro) .window,:host(.to-top-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-top-opened.to-top-outro) .window,:host(.to-top-opened.to-top-outro)>::slotted([slot=\"window\"]),:host(.to-top-opened) .window,:host(.to-top-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-top-outro) .window,:host(.to-top-outro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}@media (max-width: 767px){.mobile\\:w-12{width:3rem}}";
|
|
48
|
+
const mdsModalCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@tailwind components; @tailwind utilities; .svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1/1;height:100%;width:100%}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.fixed{position:fixed}.absolute{position:absolute}.ml-auto{margin-left:auto}.flex{display:-ms-flexbox;display:flex}.min-w-0{min-width:0rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.items-center{-ms-flex-align:center;align-items:center}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-tone-neutral-09{--tw-border-opacity:1;border-color:rgb(var(--tone-neutral-09) / var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.text-tone-neutral-02{--tw-text-opacity:1;color:rgb(var(--tone-neutral-02) / var(--tw-text-opacity))}.text-tone-neutral-04{--tw-text-opacity:1;color:rgb(var(--tone-neutral-04) / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-modal-overlay-color:var(--magma-overlay-color, 0 0 0);--mds-modal-overlay-opacity:var(--magma-overlay-opacity, 0.5);--mds-modal-window-background:rgb(var(--tone-neutral));--mds-modal-window-overflow:auto;--mds-modal-window-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--mds-modal-z-index:var(--magma-modal-z-index);-webkit-transition-duration:700ms;transition-duration:700ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);-ms-flex-align:center;align-items:center;background-color:rgba(var(--mds-modal-overlay-color) / 0);display:-ms-flexbox;display:flex;fill:rgb(var(--tone-neutral));inset:0;-ms-flex-pack:center;justify-content:center;-webkit-perspective:600px;perspective:600px;pointer-events:none;position:fixed;z-index:var(--mds-modal-z-index, 1000)}:host([position=\"top\"]){-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}:host([position=\"bottom\"]){-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}:host(.to-bottom-opened),:host(.to-center-opened),:host(.to-left-opened),:host(.to-right-opened),:host(.to-top-opened){-webkit-transition-duration:500ms;transition-duration:500ms;background-color:rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));pointer-events:auto}.close{top:0rem;height:2.25rem;width:2.25rem;border-radius:9999px;font-size:3rem;opacity:0;-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);cursor:pointer;fill:inherit;position:absolute;-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg);-webkit-transform-origin:center;transform-origin:center;-webkit-transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, -webkit-transform;transition-property:opacity, outline, outline-offset, transform;transition-property:opacity, outline, outline-offset, transform, -webkit-transform}.window{height:100%;gap:0rem;background-color:var(--mds-modal-window-background);-webkit-box-shadow:var(--mds-modal-window-shadow);box-shadow:var(--mds-modal-window-shadow);display:grid;grid-template-rows:1fr;max-width:calc(100vw - 80px);overflow:var(--mds-modal-window-overflow)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.to-bottom){padding:2rem}@media (max-width: 767px){:host(.to-bottom){padding:1rem}}:host(.to-bottom){-ms-flex-pack:center;justify-content:center}:host(.to-bottom) .window,:host(.to-bottom)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-bottom-intro) .window,:host(.to-bottom-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-bottom-opened.to-bottom-outro) .window,:host(.to-bottom-opened.to-bottom-outro)>::slotted([slot=\"window\"]),:host(.to-bottom-opened) .window,:host(.to-bottom-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-bottom-outro) .window,:host(.to-bottom-outro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.to-center){padding:2rem}@media (max-width: 767px){:host(.to-center){padding:1rem}}:host(.to-center){-ms-flex-pack:center;justify-content:center}:host(.to-center) .window,:host(.to-center)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-center-intro) .window,:host(.to-center-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-center-opened.to-center-outro) .window,:host(.to-center-opened.to-center-outro)>::slotted([slot=\"window\"]),:host(.to-center-opened) .window,:host(.to-center-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-center-outro) .window,:host(.to-center-outro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.to-left){-ms-flex-pack:start;justify-content:flex-start}:host(.to-left) .window,:host(.to-left)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-left-intro) .window,:host(.to-left-intro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.to-left-opened.to-left-outro) .window,:host(.to-left-opened.to-left-outro)>::slotted([slot=\"window\"]),:host(.to-left-opened) .window,:host(.to-left-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.to-left-opened) .close,:host(.to-left-opened.to-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.to-left-outro) .window,:host(.to-left-outro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.to-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.to-left) .close{right:0rem;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}:host(.to-right){-ms-flex-pack:end;justify-content:flex-end}:host(.to-right) .window,:host(.to-right)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-right-intro) .window,:host(.to-right-intro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.to-right-opened.to-right-outro) .window,:host(.to-right-opened.to-right-outro)>::slotted([slot=\"window\"]),:host(.to-right-opened) .window,:host(.to-right-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.to-right-opened) .close,:host(.to-right-opened.to-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.to-right-outro) .window,:host(.to-right-outro)>::slotted([slot=\"window\"]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.to-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.to-right) .close{left:0rem;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.to-top){padding:2rem}@media (max-width: 767px){:host(.to-top){padding:1rem}}:host(.to-top){-ms-flex-pack:center;justify-content:center}:host(.to-top) .window,:host(.to-top)>::slotted([slot=\"window\"]){opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1)}:host(.to-top-intro) .window,:host(.to-top-intro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.to-top-opened.to-top-outro) .window,:host(.to-top-opened.to-top-outro)>::slotted([slot=\"window\"]),:host(.to-top-opened) .window,:host(.to-top-opened)>::slotted([slot=\"window\"]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.to-top-outro) .window,:host(.to-top-outro)>::slotted([slot=\"window\"]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}";
|
|
49
49
|
|
|
50
50
|
const MdsModal = class {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
51
|
+
constructor(hostRef) {
|
|
52
|
+
registerInstance(this, hostRef);
|
|
53
|
+
this.closeEvent = createEvent(this, "mdsModalClose", 7);
|
|
54
|
+
this.window = false;
|
|
55
|
+
this.top = false;
|
|
56
|
+
this.bottom = false;
|
|
57
|
+
this.animationState = 'intro';
|
|
58
|
+
this.km = new KeyboardManager();
|
|
59
|
+
this.componentDidLoad = () => {
|
|
60
|
+
var _a;
|
|
61
|
+
this.km.addElement(this.host, 'host');
|
|
62
|
+
const close = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close');
|
|
63
|
+
if (close)
|
|
64
|
+
this.km.addElement(close, 'close');
|
|
65
|
+
this.km.attachEscapeBehavior(() => this.closeEvent.emit());
|
|
66
|
+
this.km.attachClickBehavior('close');
|
|
67
|
+
};
|
|
68
|
+
this.animationName = (customState = '', customPosition = '') => {
|
|
69
|
+
return `to-${customPosition !== '' ? customPosition : this.position}${customState !== '' ? '-' + customState : ''}`;
|
|
70
|
+
};
|
|
71
|
+
this.closeModal = (e) => {
|
|
72
|
+
var _a;
|
|
73
|
+
if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
this.opened = e.target !== e.currentTarget;
|
|
77
|
+
if (!this.opened) {
|
|
78
|
+
this.closeEvent.emit();
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
this.stateOpened = undefined;
|
|
82
|
+
this.opened = false;
|
|
83
|
+
this.position = 'center';
|
|
84
|
+
}
|
|
85
|
+
componentWillLoad() {
|
|
86
|
+
var _a;
|
|
87
|
+
this.bottom = this.host.querySelector('[slot="bottom"]') !== null;
|
|
88
|
+
this.top = this.host.querySelector('[slot="top"]') !== null;
|
|
89
|
+
this.window = this.host.querySelector('[slot="window"]') !== null;
|
|
90
|
+
this.stateOpened = this.opened;
|
|
91
|
+
if (!this.window) {
|
|
92
|
+
this.position = 'right';
|
|
93
|
+
}
|
|
94
|
+
if (this.window) {
|
|
95
|
+
(_a = this.host.querySelector('[slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'modal');
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
componentWillRender() {
|
|
99
|
+
this.animationState = this.opened ? 'intro' : 'outro';
|
|
100
|
+
this.host.classList.add(this.animationName());
|
|
101
|
+
}
|
|
102
|
+
componentDidRender() {
|
|
103
|
+
this.animationDeelay = window.setTimeout(() => {
|
|
104
|
+
this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
|
|
105
|
+
this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
|
|
106
|
+
this.host.classList.add(this.animationName(this.animationState));
|
|
107
|
+
window.clearTimeout(this.animationDeelay);
|
|
108
|
+
}, 500);
|
|
109
|
+
}
|
|
110
|
+
disconnectedCallback() {
|
|
111
|
+
this.km.detachEscapeBehavior();
|
|
112
|
+
this.km.detachClickBehavior('close');
|
|
113
|
+
}
|
|
114
|
+
positionChange(_newValue, oldValue) {
|
|
115
|
+
window.clearTimeout(this.animationDeelay);
|
|
116
|
+
this.host.classList.remove(this.animationName('', oldValue));
|
|
117
|
+
this.host.classList.remove(this.animationName('intro', oldValue));
|
|
118
|
+
this.host.classList.remove(this.animationName('outro', oldValue));
|
|
119
|
+
}
|
|
120
|
+
openedChange(newValue) {
|
|
121
|
+
this.stateOpened = newValue;
|
|
122
|
+
window.clearTimeout(this.animationDeelay);
|
|
123
|
+
}
|
|
124
|
+
onModalCloseListener() {
|
|
125
|
+
this.opened = false;
|
|
126
|
+
}
|
|
127
|
+
onBannerCloseListener() {
|
|
128
|
+
this.opened = false;
|
|
93
129
|
}
|
|
94
|
-
|
|
95
|
-
|
|
130
|
+
render() {
|
|
131
|
+
return (h(Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
|
|
132
|
+
? h("slot", { name: "window" })
|
|
133
|
+
: h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
|
|
134
|
+
h("slot", { name: "top" }), h("slot", null), this.bottom &&
|
|
135
|
+
h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focus-bounce-light" })));
|
|
96
136
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
componentDidRender() {
|
|
103
|
-
this.animationDeelay = window.setTimeout(() => {
|
|
104
|
-
this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
|
|
105
|
-
this.host.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
|
|
106
|
-
this.host.classList.add(this.animationName(this.animationState));
|
|
107
|
-
window.clearTimeout(this.animationDeelay);
|
|
108
|
-
}, 500);
|
|
109
|
-
}
|
|
110
|
-
disconnectedCallback() {
|
|
111
|
-
this.km.detachEscapeBehavior();
|
|
112
|
-
this.km.detachClickBehavior('close');
|
|
113
|
-
}
|
|
114
|
-
positionChange(_newValue, oldValue) {
|
|
115
|
-
window.clearTimeout(this.animationDeelay);
|
|
116
|
-
this.host.classList.remove(this.animationName('', oldValue));
|
|
117
|
-
this.host.classList.remove(this.animationName('intro', oldValue));
|
|
118
|
-
this.host.classList.remove(this.animationName('outro', oldValue));
|
|
119
|
-
}
|
|
120
|
-
openedChange(newValue) {
|
|
121
|
-
this.stateOpened = newValue;
|
|
122
|
-
window.clearTimeout(this.animationDeelay);
|
|
123
|
-
}
|
|
124
|
-
onModalCloseListener() {
|
|
125
|
-
this.opened = false;
|
|
126
|
-
}
|
|
127
|
-
onBannerCloseListener() {
|
|
128
|
-
this.opened = false;
|
|
129
|
-
}
|
|
130
|
-
render() {
|
|
131
|
-
return (h(Host, { "aria-modal": clsx(this.opened ? 'true' : 'false'), class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
|
|
132
|
-
? h("slot", { name: "window" })
|
|
133
|
-
: h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`), role: "dialog", part: "window" }, this.top &&
|
|
134
|
-
h("slot", { name: "top" }), h("slot", null), this.bottom &&
|
|
135
|
-
h("slot", { name: "bottom" })), !this.window && h("i", { innerHTML: miBaselineClose, tabindex: "0", onClick: (e) => { this.closeModal(e); }, class: "svg close focus-bounce-light" })));
|
|
136
|
-
}
|
|
137
|
-
get host() { return getElement(this); }
|
|
138
|
-
static get watchers() { return {
|
|
139
|
-
"position": ["positionChange"],
|
|
140
|
-
"opened": ["openedChange"]
|
|
141
|
-
}; }
|
|
137
|
+
get host() { return getElement(this); }
|
|
138
|
+
static get watchers() { return {
|
|
139
|
+
"position": ["positionChange"],
|
|
140
|
+
"opened": ["openedChange"]
|
|
141
|
+
}; }
|
|
142
142
|
};
|
|
143
143
|
MdsModal.style = mdsModalCss;
|
|
144
144
|
|
package/dist/esm/mds-modal.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-fd30d325.js';
|
|
2
|
+
export { s as setNonce } from './index-fd30d325.js';
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
|
-
Stencil Client Patch Browser v4.
|
|
5
|
+
Stencil Client Patch Browser v4.9.1 | MIT Licensed | https://stenciljs.com
|
|
6
6
|
*/
|
|
7
7
|
const patchBrowser = () => {
|
|
8
8
|
const importMeta = import.meta.url;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var __extends=this&&this.__extends||function(){var e=function(n,r){e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var r in n)if(Object.prototype.hasOwnProperty.call(n,r))e[r]=n[r]};return e(n,r)};return function(n,r){if(typeof r!=="function"&&r!==null)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");e(n,r);function t(){this.constructor=n}n.prototype=r===null?Object.create(r):(t.prototype=r.prototype,new t)}}();var __awaiter=this&&this.__awaiter||function(e,n,r,t){function i(e){return e instanceof r?e:new r((function(n){n(e)}))}return new(r||(r=Promise))((function(r,a){function o(e){try{s(t.next(e))}catch(e){a(e)}}function u(e){try{s(t["throw"](e))}catch(e){a(e)}}function s(e){e.done?r(e.value):i(e.value).then(o,u)}s((t=t.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var r={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},t,i,a,o;return o={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function u(e){return function(n){return s([e,n])}}function s(u){if(t)throw new TypeError("Generator is already executing.");while(o&&(o=0,u[0]&&(r=0)),r)try{if(t=1,i&&(a=u[0]&2?i["return"]:u[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,u[1])).done)return a;if(i=0,a)u=[u[0]&2,a.value];switch(u[0]){case 0:case 1:a=u;break;case 4:r.label++;return{value:u[1],done:false};case 5:r.label++;i=u[1];u=[0];continue;case 7:u=r.ops.pop();r.trys.pop();continue;default:if(!(a=r.trys,a=a.length>0&&a[a.length-1])&&(u[0]===6||u[0]===2)){r=0;continue}if(u[0]===3&&(!a||u[1]>a[0]&&u[1]<a[3])){r.label=u[1];break}if(u[0]===6&&r.label<a[1]){r.label=a[1];a=u;break}if(a&&r.label<a[2]){r.label=a[2];r.ops.push(u);break}if(a[2])r.ops.pop();r.trys.pop();continue}u=n.call(e,r)}catch(e){u=[6,e];i=0}finally{t=a=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,n,r){if(r||arguments.length===2)for(var t=0,i=n.length,a;t<i;t++){if(a||!(t in n)){if(!a)a=Array.prototype.slice.call(n,0,t);a[t]=n[t]}}return e.concat(a||Array.prototype.slice.call(n))};var NAMESPACE="mds-modal";var scopeId;var hostTagName;var isSvgMode=false;var queuePending=false;var createTime=function(e,n){if(n===void 0){n=""}{return function(){return}}};var uniqueTime=function(e,n){{return function(){return}}};var HYDRATED_CSS="{visibility:hidden}[hydrated]{visibility:inherit}";var SLOT_FB_CSS="slot-fb{display:contents}slot-fb[hidden]{display:none}";var EMPTY_OBJ={};var isDef=function(e){return e!=null};var isComplexType=function(e){e=typeof e;return e==="object"||e==="function"};function queryNonceMetaTagContent(e){var n,r,t;return(t=(r=(n=e.head)===null||n===void 0?void 0:n.querySelector('meta[name="csp-nonce"]'))===null||r===void 0?void 0:r.getAttribute("content"))!==null&&t!==void 0?t:undefined}var h=function(e,n){var r=[];for(var t=2;t<arguments.length;t++){r[t-2]=arguments[t]}var i=null;var a=false;var o=false;var u=[];var s=function(n){for(var r=0;r<n.length;r++){i=n[r];if(Array.isArray(i)){s(i)}else if(i!=null&&typeof i!=="boolean"){if(a=typeof e!=="function"&&!isComplexType(i)){i=String(i)}if(a&&o){u[u.length-1].t+=i}else{u.push(a?newVNode(null,i):i)}o=a}}};s(r);if(n){{var f=n.className||n.class;if(f){n.class=typeof f!=="object"?f:Object.keys(f).filter((function(e){return f[e]})).join(" ")}}}var l=newVNode(e,null);l.i=n;if(u.length>0){l.o=u}return l};var newVNode=function(e,n){var r={u:0,l:e,t:n,v:null,o:null};{r.i=null}return r};var Host={};var isHost=function(e){return e&&e.l===Host};var parsePropertyValue=function(e,n){if(e!=null&&!isComplexType(e)){if(n&4){return e==="false"?false:e===""||!!e}if(n&1){return String(e)}return e}return e};var getElement=function(e){return getHostRef(e).$hostElement$};var createEvent=function(e,n,r){var t=getElement(e);return{emit:function(e){return emitEvent(t,n,{bubbles:!!(r&4),composed:!!(r&2),cancelable:!!(r&1),detail:e})}}};var emitEvent=function(e,n,r){var t=plt.ce(n,r);e.dispatchEvent(t);return t};var rootAppliedStyles=new WeakMap;var registerStyle=function(e,n,r){var t=styles.get(e);if(supportsConstructableStylesheets&&r){t=t||new CSSStyleSheet;if(typeof t==="string"){t=n}else{t.replaceSync(n)}}else{t=n}styles.set(e,t)};var addStyle=function(e,n,r){var t;var i=getScopeId(n);var a=styles.get(i);e=e.nodeType===11?e:doc;if(a){if(typeof a==="string"){e=e.head||e;var o=rootAppliedStyles.get(e);var u=void 0;if(!o){rootAppliedStyles.set(e,o=new Set)}if(!o.has(i)){{u=doc.createElement("style");u.innerHTML=a;var s=(t=plt.p)!==null&&t!==void 0?t:queryNonceMetaTagContent(doc);if(s!=null){u.setAttribute("nonce",s)}e.insertBefore(u,e.querySelector("link"))}if(n.u&4){u.innerHTML+=SLOT_FB_CSS}if(o){o.add(i)}}}else if(!e.adoptedStyleSheets.includes(a)){e.adoptedStyleSheets=__spreadArray(__spreadArray([],e.adoptedStyleSheets,true),[a],false)}}return i};var attachStyles=function(e){var n=e.m;var r=e.$hostElement$;var t=n.u;var i=createTime("attachStyles",n.h);var a=addStyle(r.shadowRoot?r.shadowRoot:r.getRootNode(),n);if(t&10){r["s-sc"]=a;r.classList.add(a+"-h")}i()};var getScopeId=function(e,n){return"sc-"+e.h};var setAccessor=function(e,n,r,t,i,a){if(r!==t){var o=isMemberInElement(e,n);var u=n.toLowerCase();if(n==="class"){var s=e.classList;var f=parseClassList(r);var l=parseClassList(t);s.remove.apply(s,f.filter((function(e){return e&&!l.includes(e)})));s.add.apply(s,l.filter((function(e){return e&&!f.includes(e)})))}else if(!o&&n[0]==="o"&&n[1]==="n"){if(n[2]==="-"){n=n.slice(3)}else if(isMemberInElement(win,u)){n=u.slice(2)}else{n=u[2]+n.slice(3)}if(r||t){var c=n.endsWith(CAPTURE_EVENT_SUFFIX);n=n.replace(CAPTURE_EVENT_REGEX,"");if(r){plt.rel(e,n,r,c)}if(t){plt.ael(e,n,t,c)}}}else{var v=isComplexType(t);if((o||v&&t!==null)&&!i){try{if(!e.tagName.includes("-")){var d=t==null?"":t;if(n==="list"){o=false}else if(r==null||e[n]!=d){e[n]=d}}else{e[n]=t}}catch(e){}}if(t==null||t===false){if(t!==false||e.getAttribute(n)===""){{e.removeAttribute(n)}}}else if((!o||a&4||i)&&!v){t=t===true?"":t;{e.setAttribute(n,t)}}}}};var parseClassListRegex=/\s/;var parseClassList=function(e){return!e?[]:e.split(parseClassListRegex)};var CAPTURE_EVENT_SUFFIX="Capture";var CAPTURE_EVENT_REGEX=new RegExp(CAPTURE_EVENT_SUFFIX+"$");var updateElement=function(e,n,r,t){var i=n.v.nodeType===11&&n.v.host?n.v.host:n.v;var a=e&&e.i||EMPTY_OBJ;var o=n.i||EMPTY_OBJ;{for(t in a){if(!(t in o)){setAccessor(i,t,a[t],undefined,r,n.u)}}}for(t in o){setAccessor(i,t,a[t],o[t],r,n.u)}};var createElm=function(e,n,r,t){var i=n.o[r];var a=0;var o;var u;if(i.t!==null){o=i.v=doc.createTextNode(i.t)}else{o=i.v=doc.createElement(i.l);{updateElement(null,i,isSvgMode)}if(isDef(scopeId)&&o["s-si"]!==scopeId){o.classList.add(o["s-si"]=scopeId)}if(i.o){for(a=0;a<i.o.length;++a){u=createElm(e,i,a);if(u){o.appendChild(u)}}}}o["s-hn"]=hostTagName;return o};var addVnodes=function(e,n,r,t,i,a){var o=e;var u;if(o.shadowRoot&&o.tagName===hostTagName){o=o.shadowRoot}for(;i<=a;++i){if(t[i]){u=createElm(null,r,i);if(u){t[i].v=u;o.insertBefore(u,n)}}}};var removeVnodes=function(e,n,r){for(var t=n;t<=r;++t){var i=e[t];if(i){var a=i.v;if(a){a.remove()}}}};var updateChildren=function(e,n,r,t,i){if(i===void 0){i=false}var a=0;var o=0;var u=n.length-1;var s=n[0];var f=n[u];var l=t.length-1;var c=t[0];var v=t[l];var d;while(a<=u&&o<=l){if(s==null){s=n[++a]}else if(f==null){f=n[--u]}else if(c==null){c=t[++o]}else if(v==null){v=t[--l]}else if(isSameVnode(s,c,i)){patch(s,c,i);s=n[++a];c=t[++o]}else if(isSameVnode(f,v,i)){patch(f,v,i);f=n[--u];v=t[--l]}else if(isSameVnode(s,v,i)){patch(s,v,i);e.insertBefore(s.v,f.v.nextSibling);s=n[++a];v=t[--l]}else if(isSameVnode(f,c,i)){patch(f,c,i);e.insertBefore(f.v,s.v);f=n[--u];c=t[++o]}else{{d=createElm(n&&n[o],r,o);c=t[++o]}if(d){{s.v.parentNode.insertBefore(d,s.v)}}}}if(a>u){addVnodes(e,t[l+1]==null?null:t[l+1].v,r,t,o,l)}else if(o>l){removeVnodes(n,a,u)}};var isSameVnode=function(e,n,r){if(r===void 0){r=false}if(e.l===n.l){return true}return false};var patch=function(e,n,r){if(r===void 0){r=false}var t=n.v=e.v;var i=e.o;var a=n.o;var o=n.l;var u=n.t;if(u===null){{if(o==="slot");else{updateElement(e,n,isSvgMode)}}if(i!==null&&a!==null){updateChildren(t,i,n,a,r)}else if(a!==null){if(e.t!==null){t.textContent=""}addVnodes(t,null,n,a,0,a.length-1)}else if(i!==null){removeVnodes(i,0,i.length-1)}}else if(e.t!==u){t.data=u}};var renderVdom=function(e,n,r){if(r===void 0){r=false}var t=e.$hostElement$;var i=e.m;var a=e.S||newVNode(null,null);var o=isHost(n)?n:h(null,null,n);hostTagName=t.tagName;if(i.C){o.i=o.i||{};i.C.map((function(e){var n=e[0],r=e[1];return o.i[r]=t[n]}))}if(r&&o.i){for(var u=0,s=Object.keys(o.i);u<s.length;u++){var f=s[u];if(t.hasAttribute(f)&&!["key","ref","style","class"].includes(f)){o.i[f]=t[f]}}}o.l=null;o.u|=4;e.S=o;o.v=a.v=t.shadowRoot||t;{scopeId=t["s-sc"]}patch(a,o,r)};var attachToAncestor=function(e,n){if(n&&!e.T&&n["s-p"]){n["s-p"].push(new Promise((function(n){return e.T=n})))}};var scheduleUpdate=function(e,n){{e.u|=16}if(e.u&4){e.u|=512;return}attachToAncestor(e,e._);var r=function(){return dispatchHooks(e,n)};return writeTask(r)};var dispatchHooks=function(e,n){var r=createTime("scheduleUpdate",e.m.h);var t=e.R;var i;if(n){{e.u|=256;if(e.A){e.A.map((function(e){var n=e[0],r=e[1];return safeCall(t,n,r)}));e.A=undefined}}{i=safeCall(t,"componentWillLoad")}}{i=enqueue(i,(function(){return safeCall(t,"componentWillRender")}))}r();return enqueue(i,(function(){return updateComponent(e,t,n)}))};var enqueue=function(e,n){return isPromisey(e)?e.then(n):n()};var isPromisey=function(e){return e instanceof Promise||e&&e.then&&typeof e.then==="function"};var updateComponent=function(e,n,r){return __awaiter(void 0,void 0,void 0,(function(){var t,i,a,o,u,s,f;return __generator(this,(function(l){i=e.$hostElement$;a=createTime("update",e.m.h);o=i["s-rc"];if(r){attachStyles(e)}u=createTime("render",e.m.h);{callRender(e,n,i,r)}if(o){o.map((function(e){return e()}));i["s-rc"]=undefined}u();a();{s=(t=i["s-p"])!==null&&t!==void 0?t:[];f=function(){return postUpdateComponent(e)};if(s.length===0){f()}else{Promise.all(s).then(f);e.u|=4;s.length=0}}return[2]}))}))};var callRender=function(e,n,r,t){try{n=n.render();{e.u&=~16}{e.u|=2}{{{renderVdom(e,n,t)}}}}catch(n){consoleError(n,e.$hostElement$)}return null};var postUpdateComponent=function(e){var n=e.m.h;var r=e.$hostElement$;var t=createTime("postUpdate",n);var i=e.R;var a=e._;{safeCall(i,"componentDidRender")}if(!(e.u&64)){e.u|=64;{addHydratedFlag(r)}t();{e.$(r);if(!a){appDidLoad()}}}else{t()}{if(e.T){e.T();e.T=undefined}if(e.u&512){nextTick((function(){return scheduleUpdate(e,false)}))}e.u&=~(4|512)}};var appDidLoad=function(e){{addHydratedFlag(doc.documentElement)}nextTick((function(){return emitEvent(win,"appload",{detail:{namespace:NAMESPACE}})}))};var safeCall=function(e,n,r){if(e&&e[n]){try{return e[n](r)}catch(e){consoleError(e)}}return undefined};var addHydratedFlag=function(e){return e.setAttribute("hydrated","")};var getValue=function(e,n){return getHostRef(e).H.get(n)};var setValue=function(e,n,r,t){var i=getHostRef(e);var a=i.$hostElement$;var o=i.H.get(n);var u=i.u;var s=i.R;r=parsePropertyValue(r,t.V[n][0]);var f=Number.isNaN(o)&&Number.isNaN(r);var l=r!==o&&!f;if((!(u&8)||o===undefined)&&l){i.H.set(n,r);if(s){if(t.M&&u&128){var c=t.M[n];if(c){c.map((function(e){try{s[e](r,o,n)}catch(e){consoleError(e,a)}}))}}if((u&(2|16))===2){scheduleUpdate(i,false)}}}};var proxyComponent=function(e,n,r){var t;var i=e.prototype;if(n.V){if(e.watchers){n.M=e.watchers}var a=Object.entries(n.V);a.map((function(e){var t=e[0],a=e[1][0];if(a&31||r&2&&a&32){Object.defineProperty(i,t,{get:function(){return getValue(this,t)},set:function(e){setValue(this,t,e,n)},configurable:true,enumerable:true})}}));if(r&1){var o=new Map;i.attributeChangedCallback=function(e,r,t){var a=this;plt.jmp((function(){var u;var s=o.get(e);if(a.hasOwnProperty(s)){t=a[s];delete a[s]}else if(i.hasOwnProperty(s)&&typeof a[s]==="number"&&a[s]==t){return}else if(s==null){var f=getHostRef(a);var l=f===null||f===void 0?void 0:f.u;if(l&&!(l&8)&&l&128&&t!==r){var c=f.R;var v=(u=n.M)===null||u===void 0?void 0:u[e];v===null||v===void 0?void 0:v.forEach((function(n){if(c[n]!=null){c[n].call(c,t,r,e)}}))}return}a[s]=t===null&&typeof a[s]==="boolean"?false:t}))};e.observedAttributes=Array.from(new Set(__spreadArray(__spreadArray([],Object.keys((t=n.M)!==null&&t!==void 0?t:{}),true),a.filter((function(e){var n=e[0],r=e[1];return r[0]&15})).map((function(e){var r=e[0],t=e[1];var i;var a=t[1]||r;o.set(a,r);if(t[0]&512){(i=n.C)===null||i===void 0?void 0:i.push([r,a])}return a})),true)))}}return e};var initializeComponent=function(e,n,r,t){return __awaiter(void 0,void 0,void 0,(function(){var e,t,i,a,o,u,s,f;return __generator(this,(function(l){switch(l.label){case 0:if(!((n.u&32)===0))return[3,3];n.u|=32;e=loadModule(r);if(!e.then)return[3,2];t=uniqueTime();return[4,e];case 1:e=l.sent();t();l.label=2;case 2:if(!e.isProxied){{r.M=e.watchers}proxyComponent(e,r,2);e.isProxied=true}i=createTime("createInstance",r.h);{n.u|=8}try{new e(n)}catch(e){consoleError(e)}{n.u&=~8}{n.u|=128}i();if(e.style){a=e.style;o=getScopeId(r);if(!styles.has(o)){u=createTime("registerStyles",r.h);registerStyle(o,a,!!(r.u&1));u()}}l.label=3;case 3:s=n._;f=function(){return scheduleUpdate(n,true)};if(s&&s["s-rc"]){s["s-rc"].push(f)}else{f()}return[2]}}))}))};var fireConnectedCallback=function(e){};var connectedCallback=function(e){if((plt.u&1)===0){var n=getHostRef(e);var r=n.m;var t=createTime("connectedCallback",r.h);if(!(n.u&1)){n.u|=1;{var i=e;while(i=i.parentNode||i.host){if(i["s-p"]){attachToAncestor(n,n._=i);break}}}if(r.V){Object.entries(r.V).map((function(n){var r=n[0],t=n[1][0];if(t&31&&e.hasOwnProperty(r)){var i=e[r];delete e[r];e[r]=i}}))}{initializeComponent(e,n,r)}}else{addHostEventListeners(e,n,r.k);if(n===null||n===void 0?void 0:n.R);else if(n===null||n===void 0?void 0:n.L){n.L.then((function(){return fireConnectedCallback()}))}}t()}};var disconnectInstance=function(e){{safeCall(e,"disconnectedCallback")}};var disconnectedCallback=function(e){return __awaiter(void 0,void 0,void 0,(function(){var n;return __generator(this,(function(r){if((plt.u&1)===0){n=getHostRef(e);{if(n.P){n.P.map((function(e){return e()}));n.P=undefined}}if(n===null||n===void 0?void 0:n.R){disconnectInstance(n.R)}else if(n===null||n===void 0?void 0:n.L){n.L.then((function(){return disconnectInstance(n.R)}))}}return[2]}))}))};var bootstrapLazy=function(e,n){if(n===void 0){n={}}var r;var t=createTime();var i=[];var a=n.exclude||[];var o=win.customElements;var u=doc.head;var s=u.querySelector("meta[charset]");var f=doc.createElement("style");var l=[];var c;var v=true;Object.assign(plt,n);plt.N=new URL(n.resourcesUrl||"./",doc.baseURI).href;var d=false;e.map((function(e){e[1].map((function(n){var r;var t={u:n[0],h:n[1],V:n[2],k:n[3]};if(t.u&4){d=true}{t.V=n[2]}{t.k=n[3]}{t.C=[]}{t.M=(r=n[4])!==null&&r!==void 0?r:{}}var u=t.h;var s=function(e){__extends(n,e);function n(n){var r=e.call(this,n)||this;n=r;registerHost(n,t);if(t.u&1){{{n.attachShadow({mode:"open"})}}}return r}n.prototype.connectedCallback=function(){var e=this;if(c){clearTimeout(c);c=null}if(v){l.push(this)}else{plt.jmp((function(){return connectedCallback(e)}))}};n.prototype.disconnectedCallback=function(){var e=this;plt.jmp((function(){return disconnectedCallback(e)}))};n.prototype.componentOnReady=function(){return getHostRef(this).L};return n}(HTMLElement);t.q=e[0];if(!a.includes(u)&&!o.get(u)){i.push(u);o.define(u,proxyComponent(s,t,1))}}))}));if(d){f.innerHTML+=SLOT_FB_CSS}{f.innerHTML+=i+HYDRATED_CSS}if(f.innerHTML.length){f.setAttribute("data-styles","");var p=(r=plt.p)!==null&&r!==void 0?r:queryNonceMetaTagContent(doc);if(p!=null){f.setAttribute("nonce",p)}u.insertBefore(f,s?s.nextSibling:u.firstChild)}v=false;if(l.length){l.map((function(e){return e.connectedCallback()}))}else{{plt.jmp((function(){return c=setTimeout(appDidLoad,30)}))}}t()};var addHostEventListeners=function(e,n,r,t){if(r){r.map((function(r){var t=r[0],i=r[1],a=r[2];var o=getHostListenerTarget(e,t);var u=hostListenerProxy(n,a);var s=hostListenerOpts(t);plt.ael(o,i,u,s);(n.P=n.P||[]).push((function(){return plt.rel(o,i,u,s)}))}))}};var hostListenerProxy=function(e,n){return function(r){try{{if(e.u&256){e.R[n](r)}else{(e.A=e.A||[]).push([n,r])}}}catch(e){consoleError(e)}}};var getHostListenerTarget=function(e,n){if(n&4)return doc;return e};var hostListenerOpts=function(e){return(e&2)!==0};var setNonce=function(e){return plt.p=e};var hostRefs=new WeakMap;var getHostRef=function(e){return hostRefs.get(e)};var registerInstance=function(e,n){return hostRefs.set(n.R=e,n)};var registerHost=function(e,n){var r={u:0,$hostElement$:e,m:n,H:new Map};{r.L=new Promise((function(e){return r.$=e}));e["s-p"]=[];e["s-rc"]=[]}addHostEventListeners(e,r,n.k);return hostRefs.set(e,r)};var isMemberInElement=function(e,n){return n in e};var consoleError=function(e,n){return(0,console.error)(e,n)};var cmpModules=new Map;var loadModule=function(e,n,r){var t=e.h.replace(/-/g,"_");var i=e.q;var a=cmpModules.get(i);if(a){return a[t]}if(!r||!BUILD.hotModuleReplacement){var o=function(e){cmpModules.set(i,e);return e[t]};switch(i){case"mds-modal":return import("./mds-modal.entry.js").then(o,consoleError)}}return import("./".concat(i,".entry.js").concat("")).then((function(e){{cmpModules.set(i,e)}return e[t]}),consoleError)};var styles=new Map;var win=typeof window!=="undefined"?window:{};var doc=win.document||{head:{}};var plt={u:0,N:"",jmp:function(e){return e()},raf:function(e){return requestAnimationFrame(e)},ael:function(e,n,r,t){return e.addEventListener(n,r,t)},rel:function(e,n,r,t){return e.removeEventListener(n,r,t)},ce:function(e,n){return new CustomEvent(e,n)}};var promiseResolve=function(e){return Promise.resolve(e)};var supportsConstructableStylesheets=function(){try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false}();var queueDomReads=[];var queueDomWrites=[];var queueTask=function(e,n){return function(r){e.push(r);if(!queuePending){queuePending=true;if(n&&plt.u&4){nextTick(flush)}else{plt.raf(flush)}}}};var consume=function(e){for(var n=0;n<e.length;n++){try{e[n](performance.now())}catch(e){consoleError(e)}}e.length=0};var flush=function(){consume(queueDomReads);{consume(queueDomWrites);if(queuePending=queueDomReads.length>0){plt.raf(flush)}}};var nextTick=function(e){return promiseResolve().then(e)};var writeTask=queueTask(queueDomWrites,true);export{Host as H,bootstrapLazy as b,createEvent as c,getElement as g,h,promiseResolve as p,registerInstance as r,setNonce as s};
|