@maggioli-design-system/mds-modal 1.0.2 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-ced1b9b6.js → index-5643c33e.js} +6 -1
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/mds-modal.cjs.entry.js +10 -4
- package/dist/cjs/mds-modal.cjs.js +3 -3
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/mds-modal/mds-modal.css +12 -18
- package/dist/collection/components/mds-modal/mds-modal.js +13 -4
- package/dist/collection/dictionary/icon.js +1 -1
- package/dist/collection/dictionary/typography.js +7 -1
- package/dist/collection/dictionary/variant.js +1 -0
- package/dist/components/mds-modal.js +12 -5
- package/dist/esm/{index-7d5b7d79.js → index-75ff1533.js} +6 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mds-modal.entry.js +10 -4
- package/dist/esm/mds-modal.js +3 -3
- package/dist/esm-es5/index-75ff1533.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 +1 -1
- package/dist/mds-modal/p-3f2aad3d.system.js +1 -0
- package/dist/mds-modal/p-a4d22860.entry.js +1 -0
- package/dist/mds-modal/p-bc66d772.js +1 -0
- package/dist/mds-modal/p-bfbfd9ea.system.js +1 -0
- package/dist/mds-modal/p-f3ef788d.system.entry.js +1 -0
- package/dist/stats.json +46 -36
- package/dist/types/dictionary/typography.d.ts +2 -1
- package/dist/types/stencil-public-runtime.d.ts +6 -4
- package/dist/types/types/typography.d.ts +3 -2
- package/dist/types/types/variant.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/mds-modal/mds-modal.tsx +11 -5
- package/src/dictionary/icon.ts +1 -1
- package/src/dictionary/typography.ts +8 -0
- package/src/dictionary/variant.ts +1 -0
- package/src/types/typography.ts +6 -0
- package/src/types/variant.ts +2 -1
- package/www/build/mds-modal.esm.js +1 -1
- package/www/build/mds-modal.js +1 -1
- package/www/build/p-3f2aad3d.system.js +1 -0
- package/www/build/p-a4d22860.entry.js +1 -0
- package/www/build/p-bc66d772.js +1 -0
- package/www/build/p-bfbfd9ea.system.js +1 -0
- package/www/build/p-f3ef788d.system.entry.js +1 -0
- package/dist/esm-es5/index-7d5b7d79.js +0 -1
- package/dist/mds-modal/p-0fa95990.system.js +0 -1
- package/dist/mds-modal/p-818ca69a.js +0 -1
- package/dist/mds-modal/p-c4f8275b.system.entry.js +0 -1
- package/dist/mds-modal/p-d3c229eb.entry.js +0 -1
- package/dist/mds-modal/p-d8cb77c3.system.js +0 -1
- package/www/build/p-0fa95990.system.js +0 -1
- package/www/build/p-818ca69a.js +0 -1
- package/www/build/p-c4f8275b.system.entry.js +0 -1
- package/www/build/p-d3c229eb.entry.js +0 -1
- package/www/build/p-d8cb77c3.system.js +0 -1
|
@@ -50,7 +50,7 @@ const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
|
|
|
50
50
|
const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
51
51
|
if (listeners) {
|
|
52
52
|
listeners.map(([flags, name, method]) => {
|
|
53
|
-
const target = elm;
|
|
53
|
+
const target = getHostListenerTarget(elm, flags) ;
|
|
54
54
|
const handler = hostListenerProxy(hostRef, method);
|
|
55
55
|
const opts = hostListenerOpts(flags);
|
|
56
56
|
plt.ael(target, name, handler, opts);
|
|
@@ -74,6 +74,11 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
|
74
74
|
consoleError(e);
|
|
75
75
|
}
|
|
76
76
|
};
|
|
77
|
+
const getHostListenerTarget = (elm, flags) => {
|
|
78
|
+
if (flags & 4 /* TargetDocument */)
|
|
79
|
+
return doc;
|
|
80
|
+
return elm;
|
|
81
|
+
};
|
|
77
82
|
// prettier-ignore
|
|
78
83
|
const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
79
84
|
const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
|
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-5643c33e.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
|
-
Stencil Client Patch Esm v2.
|
|
8
|
+
Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
|
|
9
9
|
*/
|
|
10
10
|
const patchEsm = () => {
|
|
11
11
|
return index.promiseResolve();
|
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[
|
|
17
|
+
return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"stateOpened":[32]},[[4,"close","onCloseListener"]]]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -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-5643c33e.js');
|
|
6
6
|
|
|
7
7
|
function toVal(mix) {
|
|
8
8
|
var k, y, str='';
|
|
@@ -45,7 +45,7 @@ function clsx () {
|
|
|
45
45
|
return str;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
const mdsModalCss = "
|
|
48
|
+
const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.border{border-width:1px}.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{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-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);-webkit-perspective:600px;perspective:600px}:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}";
|
|
49
49
|
|
|
50
50
|
let MdsModal = class {
|
|
51
51
|
constructor(hostRef) {
|
|
@@ -63,6 +63,10 @@ let MdsModal = class {
|
|
|
63
63
|
return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
|
|
64
64
|
};
|
|
65
65
|
this.closeModal = (e = null) => {
|
|
66
|
+
var _a;
|
|
67
|
+
if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
66
70
|
this.opened = e.target !== e.currentTarget;
|
|
67
71
|
if (!this.opened) {
|
|
68
72
|
this.close.emit();
|
|
@@ -73,6 +77,7 @@ let MdsModal = class {
|
|
|
73
77
|
this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
|
|
74
78
|
this.top = this.hostElement.querySelector('[slot="top"]') !== null;
|
|
75
79
|
this.window = this.hostElement.querySelector('[slot="window"]') !== null;
|
|
80
|
+
this.stateOpened = this.opened;
|
|
76
81
|
if (this.window && this.position === null) {
|
|
77
82
|
this.position = 'center';
|
|
78
83
|
}
|
|
@@ -98,14 +103,15 @@ let MdsModal = class {
|
|
|
98
103
|
this.hostElement.classList.remove(this.animationName('intro', oldValue));
|
|
99
104
|
this.hostElement.classList.remove(this.animationName('outro', oldValue));
|
|
100
105
|
}
|
|
101
|
-
openedChange() {
|
|
106
|
+
openedChange(newValue) {
|
|
107
|
+
this.stateOpened = newValue;
|
|
102
108
|
window.clearTimeout(this.animationDeelay);
|
|
103
109
|
}
|
|
104
110
|
onCloseListener() {
|
|
105
111
|
this.opened = false;
|
|
106
112
|
}
|
|
107
113
|
render() {
|
|
108
|
-
return (index.h(index.Host, { class: clsx(this.
|
|
114
|
+
return (index.h(index.Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
|
|
109
115
|
?
|
|
110
116
|
index.h("slot", { name: "window" })
|
|
111
117
|
:
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const index = require('./index-
|
|
3
|
+
const index = require('./index-5643c33e.js');
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
|
-
Stencil Client Patch Browser v2.
|
|
6
|
+
Stencil Client Patch Browser v2.13.0 | 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));
|
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[
|
|
18
|
+
return index.bootstrapLazy([["mds-modal.cjs",[[1,"mds-modal",{"opened":[1540],"position":[1537],"stateOpened":[32]},[[4,"close","onCloseListener"]]]]]], options);
|
|
19
19
|
});
|
|
@@ -1,17 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
--tw-ring-shadow: 0 0 #0000;
|
|
5
|
-
--tw-shadow: 0 0 #0000;
|
|
6
|
-
--tw-shadow-colored: 0 0 #0000;
|
|
7
|
-
}
|
|
8
|
-
.animate-left, .animate-right {
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
.animate-left, .animate-right {
|
|
9
4
|
opacity: 0;
|
|
10
5
|
transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
|
|
11
6
|
transition-duration: 500ms;
|
|
12
7
|
transition-timing-function: cubic-bezier(1, 0, 0, 1);
|
|
13
8
|
}
|
|
14
|
-
|
|
9
|
+
|
|
10
|
+
.animate-right-intro,
|
|
15
11
|
.animate-right-outro {
|
|
16
12
|
transform: translateX(calc(100% + 50px));
|
|
17
13
|
}
|
|
@@ -99,6 +95,7 @@
|
|
|
99
95
|
}
|
|
100
96
|
|
|
101
97
|
@media (max-width: 767px) {
|
|
98
|
+
|
|
102
99
|
:host ( .animate-center ) {
|
|
103
100
|
padding: 1rem;
|
|
104
101
|
}
|
|
@@ -116,11 +113,10 @@
|
|
|
116
113
|
}
|
|
117
114
|
|
|
118
115
|
:host ( .animate-center-opened.animate-center-outro ) .window, :host ( .animate-center-opened.animate-center-outro ) > ::slotted ( [slot=window] ), :host ( .animate-center-opened ) .window, :host ( .animate-center-opened ) > ::slotted ( [slot=window] ) {
|
|
116
|
+
opacity: 1;
|
|
119
117
|
|
|
120
118
|
transform: rotateX(0) scale(1) translateY(0);
|
|
121
|
-
|
|
122
|
-
opacity: 1;
|
|
123
|
-
}
|
|
119
|
+
}
|
|
124
120
|
|
|
125
121
|
:host ( .animate-center-outro ) .window, :host ( .animate-center-outro ) > ::slotted ( [slot=window] ) {
|
|
126
122
|
transform: rotateX(-22deg) scale(0.5) translateY(-40%);
|
|
@@ -142,11 +138,10 @@
|
|
|
142
138
|
}
|
|
143
139
|
|
|
144
140
|
:host ( .animate-right-opened.animate-right-outro ) .window, :host ( .animate-right-opened.animate-right-outro ) > ::slotted ( [slot=window] ), :host ( .animate-right-opened ) .window, :host ( .animate-right-opened ) > ::slotted ( [slot=window] ) {
|
|
141
|
+
opacity: 1;
|
|
145
142
|
|
|
146
143
|
transform: translateX(0);
|
|
147
|
-
|
|
148
|
-
opacity: 1;
|
|
149
|
-
}
|
|
144
|
+
}
|
|
150
145
|
|
|
151
146
|
:host ( .animate-right-opened ) .close, :host ( .animate-right-opened.animate-right-outro ) .close {
|
|
152
147
|
opacity: 1;
|
|
@@ -184,11 +179,10 @@
|
|
|
184
179
|
}
|
|
185
180
|
|
|
186
181
|
:host ( .animate-left-opened.animate-left-outro ) .window, :host ( .animate-left-opened.animate-left-outro ) > ::slotted ( [slot=window] ), :host ( .animate-left-opened ) .window, :host ( .animate-left-opened ) > ::slotted ( [slot=window] ) {
|
|
182
|
+
opacity: 1;
|
|
187
183
|
|
|
188
184
|
transform: translateX(0);
|
|
189
|
-
|
|
190
|
-
opacity: 1;
|
|
191
|
-
}
|
|
185
|
+
}
|
|
192
186
|
|
|
193
187
|
:host ( .animate-left-opened ) .close, :host ( .animate-left-opened.animate-left-outro ) .close {
|
|
194
188
|
opacity: 1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Element, Event, Host, h, Listen, Prop, Watch } from '@stencil/core';
|
|
1
|
+
import { Component, Element, Event, Host, h, Listen, Prop, Watch, State } from '@stencil/core';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
export class MdsModal {
|
|
4
4
|
constructor() {
|
|
@@ -14,6 +14,10 @@ export class MdsModal {
|
|
|
14
14
|
return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
|
|
15
15
|
};
|
|
16
16
|
this.closeModal = (e = null) => {
|
|
17
|
+
var _a;
|
|
18
|
+
if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
17
21
|
this.opened = e.target !== e.currentTarget;
|
|
18
22
|
if (!this.opened) {
|
|
19
23
|
this.close.emit();
|
|
@@ -24,6 +28,7 @@ export class MdsModal {
|
|
|
24
28
|
this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
|
|
25
29
|
this.top = this.hostElement.querySelector('[slot="top"]') !== null;
|
|
26
30
|
this.window = this.hostElement.querySelector('[slot="window"]') !== null;
|
|
31
|
+
this.stateOpened = this.opened;
|
|
27
32
|
if (this.window && this.position === null) {
|
|
28
33
|
this.position = 'center';
|
|
29
34
|
}
|
|
@@ -49,14 +54,15 @@ export class MdsModal {
|
|
|
49
54
|
this.hostElement.classList.remove(this.animationName('intro', oldValue));
|
|
50
55
|
this.hostElement.classList.remove(this.animationName('outro', oldValue));
|
|
51
56
|
}
|
|
52
|
-
openedChange() {
|
|
57
|
+
openedChange(newValue) {
|
|
58
|
+
this.stateOpened = newValue;
|
|
53
59
|
window.clearTimeout(this.animationDeelay);
|
|
54
60
|
}
|
|
55
61
|
onCloseListener() {
|
|
56
62
|
this.opened = false;
|
|
57
63
|
}
|
|
58
64
|
render() {
|
|
59
|
-
return (h(Host, { class: clsx(this.
|
|
65
|
+
return (h(Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } },
|
|
60
66
|
this.window
|
|
61
67
|
?
|
|
62
68
|
h("slot", { name: "window" })
|
|
@@ -119,6 +125,9 @@ export class MdsModal {
|
|
|
119
125
|
"defaultValue": "null"
|
|
120
126
|
}
|
|
121
127
|
}; }
|
|
128
|
+
static get states() { return {
|
|
129
|
+
"stateOpened": {}
|
|
130
|
+
}; }
|
|
122
131
|
static get events() { return [{
|
|
123
132
|
"method": "close",
|
|
124
133
|
"name": "close",
|
|
@@ -146,7 +155,7 @@ export class MdsModal {
|
|
|
146
155
|
static get listeners() { return [{
|
|
147
156
|
"name": "close",
|
|
148
157
|
"method": "onCloseListener",
|
|
149
|
-
"target":
|
|
158
|
+
"target": "document",
|
|
150
159
|
"capture": false,
|
|
151
160
|
"passive": false
|
|
152
161
|
}]; }
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import mggIconsDictionary from '@maggioli-design-system/icons/original/dictionary.json';
|
|
1
|
+
import mggIconsDictionary from '@maggioli-design-system/icons/dist/original/dictionary.json';
|
|
2
2
|
const iconsDictionary = Object.keys(mggIconsDictionary).sort();
|
|
3
3
|
export { iconsDictionary, };
|
|
@@ -13,6 +13,7 @@ const typographyDictionary = [
|
|
|
13
13
|
'label',
|
|
14
14
|
'option',
|
|
15
15
|
'paragraph',
|
|
16
|
+
'tip',
|
|
16
17
|
];
|
|
17
18
|
const typographyMonoDictionary = [
|
|
18
19
|
'code',
|
|
@@ -33,5 +34,10 @@ const typographySecondaryDictionary = [
|
|
|
33
34
|
'label',
|
|
34
35
|
'option',
|
|
35
36
|
'paragraph',
|
|
37
|
+
'tip',
|
|
36
38
|
];
|
|
37
|
-
|
|
39
|
+
const typographySmallerDictionary = [
|
|
40
|
+
'option',
|
|
41
|
+
'tip',
|
|
42
|
+
];
|
|
43
|
+
export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, };
|
|
@@ -41,7 +41,7 @@ function clsx () {
|
|
|
41
41
|
return str;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
const mdsModalCss = "
|
|
44
|
+
const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.border{border-width:1px}.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{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-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);-webkit-perspective:600px;perspective:600px}:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}";
|
|
45
45
|
|
|
46
46
|
let MdsModal$1 = class extends HTMLElement {
|
|
47
47
|
constructor() {
|
|
@@ -61,6 +61,10 @@ let MdsModal$1 = class extends HTMLElement {
|
|
|
61
61
|
return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
|
|
62
62
|
};
|
|
63
63
|
this.closeModal = (e = null) => {
|
|
64
|
+
var _a;
|
|
65
|
+
if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
64
68
|
this.opened = e.target !== e.currentTarget;
|
|
65
69
|
if (!this.opened) {
|
|
66
70
|
this.close.emit();
|
|
@@ -71,6 +75,7 @@ let MdsModal$1 = class extends HTMLElement {
|
|
|
71
75
|
this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
|
|
72
76
|
this.top = this.hostElement.querySelector('[slot="top"]') !== null;
|
|
73
77
|
this.window = this.hostElement.querySelector('[slot="window"]') !== null;
|
|
78
|
+
this.stateOpened = this.opened;
|
|
74
79
|
if (this.window && this.position === null) {
|
|
75
80
|
this.position = 'center';
|
|
76
81
|
}
|
|
@@ -96,14 +101,15 @@ let MdsModal$1 = class extends HTMLElement {
|
|
|
96
101
|
this.hostElement.classList.remove(this.animationName('intro', oldValue));
|
|
97
102
|
this.hostElement.classList.remove(this.animationName('outro', oldValue));
|
|
98
103
|
}
|
|
99
|
-
openedChange() {
|
|
104
|
+
openedChange(newValue) {
|
|
105
|
+
this.stateOpened = newValue;
|
|
100
106
|
window.clearTimeout(this.animationDeelay);
|
|
101
107
|
}
|
|
102
108
|
onCloseListener() {
|
|
103
109
|
this.opened = false;
|
|
104
110
|
}
|
|
105
111
|
render() {
|
|
106
|
-
return (h(Host, { class: clsx(this.
|
|
112
|
+
return (h(Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
|
|
107
113
|
?
|
|
108
114
|
h("slot", { name: "window" })
|
|
109
115
|
:
|
|
@@ -120,8 +126,9 @@ let MdsModal$1 = class extends HTMLElement {
|
|
|
120
126
|
};
|
|
121
127
|
MdsModal$1 = /*@__PURE__*/ proxyCustomElement(MdsModal$1, [1, "mds-modal", {
|
|
122
128
|
"opened": [1540],
|
|
123
|
-
"position": [1537]
|
|
124
|
-
|
|
129
|
+
"position": [1537],
|
|
130
|
+
"stateOpened": [32]
|
|
131
|
+
}, [[4, "close", "onCloseListener"]]]);
|
|
125
132
|
function defineCustomElement$1() {
|
|
126
133
|
if (typeof customElements === "undefined") {
|
|
127
134
|
return;
|
|
@@ -28,7 +28,7 @@ const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
|
|
|
28
28
|
const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
29
29
|
if (listeners) {
|
|
30
30
|
listeners.map(([flags, name, method]) => {
|
|
31
|
-
const target = elm;
|
|
31
|
+
const target = getHostListenerTarget(elm, flags) ;
|
|
32
32
|
const handler = hostListenerProxy(hostRef, method);
|
|
33
33
|
const opts = hostListenerOpts(flags);
|
|
34
34
|
plt.ael(target, name, handler, opts);
|
|
@@ -52,6 +52,11 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
|
52
52
|
consoleError(e);
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
|
+
const getHostListenerTarget = (elm, flags) => {
|
|
56
|
+
if (flags & 4 /* TargetDocument */)
|
|
57
|
+
return doc;
|
|
58
|
+
return elm;
|
|
59
|
+
};
|
|
55
60
|
// prettier-ignore
|
|
56
61
|
const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
57
62
|
const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-75ff1533.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
|
-
Stencil Client Patch Esm v2.
|
|
4
|
+
Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
|
|
5
5
|
*/
|
|
6
6
|
const patchEsm = () => {
|
|
7
7
|
return promiseResolve();
|
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["mds-modal",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[
|
|
13
|
+
return bootstrapLazy([["mds-modal",[[1,"mds-modal",{"opened":[1540],"position":[1537],"stateOpened":[32]},[[4,"close","onCloseListener"]]]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -1,4 +1,4 @@
|
|
|
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-75ff1533.js';
|
|
2
2
|
|
|
3
3
|
function toVal(mix) {
|
|
4
4
|
var k, y, str='';
|
|
@@ -41,7 +41,7 @@ function clsx () {
|
|
|
41
41
|
return str;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
const mdsModalCss = "
|
|
44
|
+
const mdsModalCss = ".animate-left,.animate-right{opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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)}.animate-right-intro,.animate-right-outro{-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}.border{border-width:1px}.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{pointer-events:none;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(var(--adjust-tone-01), var(--tw-bg-opacity));--tw-bg-opacity:0;-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);-webkit-perspective:600px;perspective:600px}:host(.animate-center-opened),:host(.animate-left-opened),:host(.animate-right-opened){pointer-events:auto;--tw-bg-opacity:0.5;-webkit-transition-duration:500ms;transition-duration:500ms}.close{position:absolute;top:0px;height:2.25rem;width:2.25rem;-webkit-transform-origin:center;transform-origin:center;cursor:pointer;font-size:2.25rem;line-height:2.5rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-10), var(--tw-text-opacity));opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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);-webkit-transform:translate(0, 24px) rotate(90deg);transform:translate(0, 24px) rotate(90deg)}.window{display:grid;height:100%;gap:0px;overflow:auto;background-color:var(--window-background, rgb(var(--adjust-tone)));-webkit-box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));grid-template-rows:1fr;max-width:calc(100vw - 80px)}.window--top{grid-template-rows:auto 1fr}.window--bottom{grid-template-rows:1fr auto}.window--top-bottom{grid-template-rows:auto 1fr auto}:host(.animate-center){-ms-flex-pack:center;justify-content:center;padding:2rem}@media (max-width: 767px){:host(.animate-center){padding:1rem}}:host(.animate-center) .window,:host(.animate-center)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-center-intro) .window,:host(.animate-center-intro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(40%);transform:rotateX(-22deg) scale(0.5) translateY(40%)}:host(.animate-center-opened.animate-center-outro) .window,:host(.animate-center-opened.animate-center-outro)>::slotted([slot=window]),:host(.animate-center-opened) .window,:host(.animate-center-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0)}:host(.animate-center-outro) .window,:host(.animate-center-outro)>::slotted([slot=window]){-webkit-transform:rotateX(-22deg) scale(0.5) translateY(-40%);transform:rotateX(-22deg) scale(0.5) translateY(-40%)}:host(.animate-right){-ms-flex-pack:end;justify-content:flex-end}:host(.animate-right) .window,:host(.animate-right)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-right-intro) .window,:host(.animate-right-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-opened.animate-right-outro) .window,:host(.animate-right-opened.animate-right-outro)>::slotted([slot=window]),:host(.animate-right-opened) .window,:host(.animate-right-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-right-opened) .close,:host(.animate-right-opened.animate-right-outro) .close{opacity:1;-webkit-transform:translate(24px, 24px) rotate(0);transform:translate(24px, 24px) rotate(0)}:host(.animate-right-outro) .window,:host(.animate-right-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(100% + 50px));transform:translateX(calc(100% + 50px))}:host(.animate-right-outro) .close{-webkit-transform:translate(-24px, 24px) rotate(90deg);transform:translate(-24px, 24px) rotate(90deg)}:host(.animate-right) .close{left:0px;-webkit-transform:translate(-36px, 24px) rotate(-90deg);transform:translate(-36px, 24px) rotate(-90deg)}:host(.animate-left){-ms-flex-pack:start;justify-content:flex-start}:host(.animate-left) .window,:host(.animate-left)>::slotted([slot=window]){opacity:0;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-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(.animate-left-intro) .window,:host(.animate-left-intro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-opened.animate-left-outro) .window,:host(.animate-left-opened.animate-left-outro)>::slotted([slot=window]),:host(.animate-left-opened) .window,:host(.animate-left-opened)>::slotted([slot=window]){opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}:host(.animate-left-opened) .close,:host(.animate-left-opened.animate-left-outro) .close{opacity:1;-webkit-transform:translate(-24px, 24px) rotate(0);transform:translate(-24px, 24px) rotate(0)}:host(.animate-left-outro) .window,:host(.animate-left-outro)>::slotted([slot=window]){-webkit-transform:translateX(calc(-100% - 50px));transform:translateX(calc(-100% - 50px))}:host(.animate-left-outro) .close{-webkit-transform:translate(24px, 24px) rotate(-90deg);transform:translate(24px, 24px) rotate(-90deg)}:host(.animate-left) .close{right:0px;-webkit-transform:translate(36px, 24px) rotate(90deg);transform:translate(36px, 24px) rotate(90deg)}";
|
|
45
45
|
|
|
46
46
|
let MdsModal = class {
|
|
47
47
|
constructor(hostRef) {
|
|
@@ -59,6 +59,10 @@ let MdsModal = class {
|
|
|
59
59
|
return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
|
|
60
60
|
};
|
|
61
61
|
this.closeModal = (e = null) => {
|
|
62
|
+
var _a;
|
|
63
|
+
if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
62
66
|
this.opened = e.target !== e.currentTarget;
|
|
63
67
|
if (!this.opened) {
|
|
64
68
|
this.close.emit();
|
|
@@ -69,6 +73,7 @@ let MdsModal = class {
|
|
|
69
73
|
this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
|
|
70
74
|
this.top = this.hostElement.querySelector('[slot="top"]') !== null;
|
|
71
75
|
this.window = this.hostElement.querySelector('[slot="window"]') !== null;
|
|
76
|
+
this.stateOpened = this.opened;
|
|
72
77
|
if (this.window && this.position === null) {
|
|
73
78
|
this.position = 'center';
|
|
74
79
|
}
|
|
@@ -94,14 +99,15 @@ let MdsModal = class {
|
|
|
94
99
|
this.hostElement.classList.remove(this.animationName('intro', oldValue));
|
|
95
100
|
this.hostElement.classList.remove(this.animationName('outro', oldValue));
|
|
96
101
|
}
|
|
97
|
-
openedChange() {
|
|
102
|
+
openedChange(newValue) {
|
|
103
|
+
this.stateOpened = newValue;
|
|
98
104
|
window.clearTimeout(this.animationDeelay);
|
|
99
105
|
}
|
|
100
106
|
onCloseListener() {
|
|
101
107
|
this.opened = false;
|
|
102
108
|
}
|
|
103
109
|
render() {
|
|
104
|
-
return (h(Host, { class: clsx(this.
|
|
110
|
+
return (h(Host, { class: clsx(this.stateOpened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
|
|
105
111
|
?
|
|
106
112
|
h("slot", { name: "window" })
|
|
107
113
|
:
|
package/dist/esm/mds-modal.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-75ff1533.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
|
-
Stencil Client Patch Browser v2.
|
|
4
|
+
Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com
|
|
5
5
|
*/
|
|
6
6
|
const patchBrowser = () => {
|
|
7
7
|
const importMeta = import.meta.url;
|
|
@@ -13,5 +13,5 @@ const patchBrowser = () => {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
patchBrowser().then(options => {
|
|
16
|
-
return bootstrapLazy([["mds-modal",[[1,"mds-modal",{"opened":[1540],"position":[1537]},[[
|
|
16
|
+
return bootstrapLazy([["mds-modal",[[1,"mds-modal",{"opened":[1540],"position":[1537],"stateOpened":[32]},[[4,"close","onCloseListener"]]]]]], options);
|
|
17
17
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var __extends=this&&this.__extends||function(){var e=function(t,r){e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)if(Object.prototype.hasOwnProperty.call(t,r))e[r]=t[r]};return e(t,r)};return function(t,r){if(typeof r!=="function"&&r!==null)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");e(t,r);function n(){this.constructor=t}t.prototype=r===null?Object.create(r):(n.prototype=r.prototype,new n)}}();var __awaiter=this&&this.__awaiter||function(e,t,r,n){function a(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,s){function o(e){try{l(n.next(e))}catch(e){s(e)}}function i(e){try{l(n["throw"](e))}catch(e){s(e)}}function l(e){e.done?r(e.value):a(e.value).then(o,i)}l((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},n,a,s,o;return o={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function i(e){return function(t){return l([e,t])}}function l(o){if(n)throw new TypeError("Generator is already executing.");while(r)try{if(n=1,a&&(s=o[0]&2?a["return"]:o[0]?a["throw"]||((s=a["return"])&&s.call(a),0):a.next)&&!(s=s.call(a,o[1])).done)return s;if(a=0,s)o=[o[0]&2,s.value];switch(o[0]){case 0:case 1:s=o;break;case 4:r.label++;return{value:o[1],done:false};case 5:r.label++;a=o[1];o=[0];continue;case 7:o=r.ops.pop();r.trys.pop();continue;default:if(!(s=r.trys,s=s.length>0&&s[s.length-1])&&(o[0]===6||o[0]===2)){r=0;continue}if(o[0]===3&&(!s||o[1]>s[0]&&o[1]<s[3])){r.label=o[1];break}if(o[0]===6&&r.label<s[1]){r.label=s[1];s=o;break}if(s&&r.label<s[2]){r.label=s[2];r.ops.push(o);break}if(s[2])r.ops.pop();r.trys.pop();continue}o=t.call(e,r)}catch(e){o=[6,e];a=0}finally{n=s=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t){for(var r=0,n=t.length,a=e.length;r<n;r++,a++)e[a]=t[r];return e};var NAMESPACE="mds-modal";var scopeId;var hostTagName;var isSvgMode=false;var queuePending=false;var win=typeof window!=="undefined"?window:{};var doc=win.document||{head:{}};var plt={$flags$:0,$resourcesUrl$:"",jmp:function(e){return e()},raf:function(e){return requestAnimationFrame(e)},ael:function(e,t,r,n){return e.addEventListener(t,r,n)},rel:function(e,t,r,n){return e.removeEventListener(t,r,n)},ce:function(e,t){return new CustomEvent(e,t)}};var promiseResolve=function(e){return Promise.resolve(e)};var supportsConstructibleStylesheets=function(){try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replace==="function"}catch(e){}return false}();var addHostEventListeners=function(e,t,r,n){if(r){r.map((function(r){var n=r[0],a=r[1],s=r[2];var o=getHostListenerTarget(e,n);var i=hostListenerProxy(t,s);var l=hostListenerOpts(n);plt.ael(o,a,i,l);(t.$rmListeners$=t.$rmListeners$||[]).push((function(){return plt.rel(o,a,i,l)}))}))}};var hostListenerProxy=function(e,t){return function(r){try{{if(e.$flags$&256){e.$lazyInstance$[t](r)}else{(e.$queuedListeners$=e.$queuedListeners$||[]).push([t,r])}}}catch(e){consoleError(e)}}};var getHostListenerTarget=function(e,t){if(t&4)return doc;return e};var hostListenerOpts=function(e){return(e&2)!==0};var HYDRATED_CSS="{visibility:hidden}.hydrated{visibility:inherit}";var createTime=function(e,t){if(t===void 0){t=""}{return function(){return}}};var uniqueTime=function(e,t){{return function(){return}}};var rootAppliedStyles=new WeakMap;var registerStyle=function(e,t,r){var n=styles.get(e);if(supportsConstructibleStylesheets&&r){n=n||new CSSStyleSheet;n.replace(t)}else{n=t}styles.set(e,n)};var addStyle=function(e,t,r,n){var a=getScopeId(t);var s=styles.get(a);e=e.nodeType===11?e:doc;if(s){if(typeof s==="string"){e=e.head||e;var o=rootAppliedStyles.get(e);var i=void 0;if(!o){rootAppliedStyles.set(e,o=new Set)}if(!o.has(a)){{{i=doc.createElement("style");i.innerHTML=s}e.insertBefore(i,e.querySelector("link"))}if(o){o.add(a)}}}else if(!e.adoptedStyleSheets.includes(s)){e.adoptedStyleSheets=__spreadArray(__spreadArray([],e.adoptedStyleSheets),[s])}}return a};var attachStyles=function(e){var t=e.$cmpMeta$;var r=e.$hostElement$;var n=t.$flags$;var a=createTime("attachStyles",t.$tagName$);var s=addStyle(r.shadowRoot?r.shadowRoot:r.getRootNode(),t);if(n&10){r["s-sc"]=s;r.classList.add(s+"-h")}a()};var getScopeId=function(e,t){return"sc-"+e.$tagName$};var EMPTY_OBJ={};var isDef=function(e){return e!=null};var isComplexType=function(e){e=typeof e;return e==="object"||e==="function"};var h=function(e,t){var r=[];for(var n=2;n<arguments.length;n++){r[n-2]=arguments[n]}var a=null;var s=false;var o=false;var i=[];var l=function(t){for(var r=0;r<t.length;r++){a=t[r];if(Array.isArray(a)){l(a)}else if(a!=null&&typeof a!=="boolean"){if(s=typeof e!=="function"&&!isComplexType(a)){a=String(a)}if(s&&o){i[i.length-1].$text$+=a}else{i.push(s?newVNode(null,a):a)}o=s}}};l(r);if(t){{var u=t.className||t.class;if(u){t.class=typeof u!=="object"?u:Object.keys(u).filter((function(e){return u[e]})).join(" ")}}}var c=newVNode(e,null);c.$attrs$=t;if(i.length>0){c.$children$=i}return c};var newVNode=function(e,t){var r={$flags$:0,$tag$:e,$text$:t,$elm$:null,$children$:null};{r.$attrs$=null}return r};var Host={};var isHost=function(e){return e&&e.$tag$===Host};var setAccessor=function(e,t,r,n,a,s){if(r!==n){var o=isMemberInElement(e,t);var i=t.toLowerCase();if(t==="class"){var l=e.classList;var u=parseClassList(r);var c=parseClassList(n);l.remove.apply(l,u.filter((function(e){return e&&!c.includes(e)})));l.add.apply(l,c.filter((function(e){return e&&!u.includes(e)})))}else if(!o&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(isMemberInElement(win,i)){t=i.slice(2)}else{t=i[2]+t.slice(3)}if(r){plt.rel(e,t,r,false)}if(n){plt.ael(e,t,n,false)}}else{var f=isComplexType(n);if((o||f&&n!==null)&&!a){try{if(!e.tagName.includes("-")){var $=n==null?"":n;if(t==="list"){o=false}else if(r==null||e[t]!=$){e[t]=$}}else{e[t]=n}}catch(e){}}if(n==null||n===false){if(n!==false||e.getAttribute(t)===""){{e.removeAttribute(t)}}}else if((!o||s&4||a)&&!f){n=n===true?"":n;{e.setAttribute(t,n)}}}}};var parseClassListRegex=/\s/;var parseClassList=function(e){return!e?[]:e.split(parseClassListRegex)};var updateElement=function(e,t,r,n){var a=t.$elm$.nodeType===11&&t.$elm$.host?t.$elm$.host:t.$elm$;var s=e&&e.$attrs$||EMPTY_OBJ;var o=t.$attrs$||EMPTY_OBJ;{for(n in s){if(!(n in o)){setAccessor(a,n,s[n],undefined,r,t.$flags$)}}}for(n in o){setAccessor(a,n,s[n],o[n],r,t.$flags$)}};var createElm=function(e,t,r,n){var a=t.$children$[r];var s=0;var o;var i;if(a.$text$!==null){o=a.$elm$=doc.createTextNode(a.$text$)}else{o=a.$elm$=doc.createElement(a.$tag$);{updateElement(null,a,isSvgMode)}if(isDef(scopeId)&&o["s-si"]!==scopeId){o.classList.add(o["s-si"]=scopeId)}if(a.$children$){for(s=0;s<a.$children$.length;++s){i=createElm(e,a,s);if(i){o.appendChild(i)}}}}return o};var addVnodes=function(e,t,r,n,a,s){var o=e;var i;if(o.shadowRoot&&o.tagName===hostTagName){o=o.shadowRoot}for(;a<=s;++a){if(n[a]){i=createElm(null,r,a);if(i){n[a].$elm$=i;o.insertBefore(i,t)}}}};var removeVnodes=function(e,t,r,n,a){for(;t<=r;++t){if(n=e[t]){a=n.$elm$;a.remove()}}};var updateChildren=function(e,t,r,n){var a=0;var s=0;var o=t.length-1;var i=t[0];var l=t[o];var u=n.length-1;var c=n[0];var f=n[u];var $;while(a<=o&&s<=u){if(i==null){i=t[++a]}else if(l==null){l=t[--o]}else if(c==null){c=n[++s]}else if(f==null){f=n[--u]}else if(isSameVnode(i,c)){patch(i,c);i=t[++a];c=n[++s]}else if(isSameVnode(l,f)){patch(l,f);l=t[--o];f=n[--u]}else if(isSameVnode(i,f)){patch(i,f);e.insertBefore(i.$elm$,l.$elm$.nextSibling);i=t[++a];f=n[--u]}else if(isSameVnode(l,c)){patch(l,c);e.insertBefore(l.$elm$,i.$elm$);l=t[--o];c=n[++s]}else{{$=createElm(t&&t[s],r,s);c=n[++s]}if($){{i.$elm$.parentNode.insertBefore($,i.$elm$)}}}}if(a>o){addVnodes(e,n[u+1]==null?null:n[u+1].$elm$,r,n,s,u)}else if(s>u){removeVnodes(t,a,o)}};var isSameVnode=function(e,t){if(e.$tag$===t.$tag$){return true}return false};var patch=function(e,t){var r=t.$elm$=e.$elm$;var n=e.$children$;var a=t.$children$;var s=t.$tag$;var o=t.$text$;if(o===null){{if(s==="slot");else{updateElement(e,t,isSvgMode)}}if(n!==null&&a!==null){updateChildren(r,n,t,a)}else if(a!==null){if(e.$text$!==null){r.textContent=""}addVnodes(r,null,t,a,0,a.length-1)}else if(n!==null){removeVnodes(n,0,n.length-1)}}else if(e.$text$!==o){r.data=o}};var renderVdom=function(e,t){var r=e.$hostElement$;var n=e.$cmpMeta$;var a=e.$vnode$||newVNode(null,null);var s=isHost(t)?t:h(null,null,t);hostTagName=r.tagName;if(n.$attrsToReflect$){s.$attrs$=s.$attrs$||{};n.$attrsToReflect$.map((function(e){var t=e[0],n=e[1];return s.$attrs$[n]=r[t]}))}s.$tag$=null;s.$flags$|=4;e.$vnode$=s;s.$elm$=a.$elm$=r.shadowRoot||r;{scopeId=r["s-sc"]}patch(a,s)};var getElement=function(e){return getHostRef(e).$hostElement$};var createEvent=function(e,t,r){var n=getElement(e);return{emit:function(e){return emitEvent(n,t,{bubbles:!!(r&4),composed:!!(r&2),cancelable:!!(r&1),detail:e})}}};var emitEvent=function(e,t,r){var n=plt.ce(t,r);e.dispatchEvent(n);return n};var attachToAncestor=function(e,t){if(t&&!e.$onRenderResolve$&&t["s-p"]){t["s-p"].push(new Promise((function(t){return e.$onRenderResolve$=t})))}};var scheduleUpdate=function(e,t){{e.$flags$|=16}if(e.$flags$&4){e.$flags$|=512;return}attachToAncestor(e,e.$ancestorComponent$);var r=function(){return dispatchHooks(e,t)};return writeTask(r)};var dispatchHooks=function(e,t){var r=createTime("scheduleUpdate",e.$cmpMeta$.$tagName$);var n=e.$lazyInstance$;var a;if(t){{e.$flags$|=256;if(e.$queuedListeners$){e.$queuedListeners$.map((function(e){var t=e[0],r=e[1];return safeCall(n,t,r)}));e.$queuedListeners$=null}}{a=safeCall(n,"componentWillLoad")}}{a=then(a,(function(){return safeCall(n,"componentWillRender")}))}r();return then(a,(function(){return updateComponent(e,n,t)}))};var updateComponent=function(e,t,r){return __awaiter(void 0,void 0,void 0,(function(){var n,a,s,o,i,l;return __generator(this,(function(u){n=e.$hostElement$;a=createTime("update",e.$cmpMeta$.$tagName$);s=n["s-rc"];if(r){attachStyles(e)}o=createTime("render",e.$cmpMeta$.$tagName$);{callRender(e,t)}if(s){s.map((function(e){return e()}));n["s-rc"]=undefined}o();a();{i=n["s-p"];l=function(){return postUpdateComponent(e)};if(i.length===0){l()}else{Promise.all(i).then(l);e.$flags$|=4;i.length=0}}return[2]}))}))};var callRender=function(e,t,r){try{t=t.render();{e.$flags$&=~16}{e.$flags$|=2}{{{renderVdom(e,t)}}}}catch(t){consoleError(t,e.$hostElement$)}return null};var postUpdateComponent=function(e){var t=e.$cmpMeta$.$tagName$;var r=e.$hostElement$;var n=createTime("postUpdate",t);var a=e.$lazyInstance$;var s=e.$ancestorComponent$;{safeCall(a,"componentDidRender")}if(!(e.$flags$&64)){e.$flags$|=64;{addHydratedFlag(r)}n();{e.$onReadyResolve$(r);if(!s){appDidLoad()}}}else{n()}{if(e.$onRenderResolve$){e.$onRenderResolve$();e.$onRenderResolve$=undefined}if(e.$flags$&512){nextTick((function(){return scheduleUpdate(e,false)}))}e.$flags$&=~(4|512)}};var appDidLoad=function(e){{addHydratedFlag(doc.documentElement)}nextTick((function(){return emitEvent(win,"appload",{detail:{namespace:NAMESPACE}})}))};var safeCall=function(e,t,r){if(e&&e[t]){try{return e[t](r)}catch(e){consoleError(e)}}return undefined};var then=function(e,t){return e&&e.then?e.then(t):t()};var addHydratedFlag=function(e){return e.classList.add("hydrated")};var parsePropertyValue=function(e,t){if(e!=null&&!isComplexType(e)){if(t&4){return e==="false"?false:e===""||!!e}if(t&1){return String(e)}return e}return e};var getValue=function(e,t){return getHostRef(e).$instanceValues$.get(t)};var setValue=function(e,t,r,n){var a=getHostRef(e);var s=a.$hostElement$;var o=a.$instanceValues$.get(t);var i=a.$flags$;var l=a.$lazyInstance$;r=parsePropertyValue(r,n.$members$[t][0]);if((!(i&8)||o===undefined)&&r!==o){a.$instanceValues$.set(t,r);if(l){if(n.$watchers$&&i&128){var u=n.$watchers$[t];if(u){u.map((function(e){try{l[e](r,o,t)}catch(e){consoleError(e,s)}}))}}if((i&(2|16))===2){scheduleUpdate(a,false)}}}};var proxyComponent=function(e,t,r){if(t.$members$){if(e.watchers){t.$watchers$=e.watchers}var n=Object.entries(t.$members$);var a=e.prototype;n.map((function(e){var n=e[0],s=e[1][0];if(s&31||r&2&&s&32){Object.defineProperty(a,n,{get:function(){return getValue(this,n)},set:function(e){setValue(this,n,e,t)},configurable:true,enumerable:true})}}));if(r&1){var s=new Map;a.attributeChangedCallback=function(e,t,r){var n=this;plt.jmp((function(){var t=s.get(e);if(n.hasOwnProperty(t)){r=n[t];delete n[t]}else if(a.hasOwnProperty(t)&&typeof n[t]==="number"&&n[t]==r){return}n[t]=r===null&&typeof n[t]==="boolean"?false:r}))};e.observedAttributes=n.filter((function(e){var t=e[0],r=e[1];return r[0]&15})).map((function(e){var r=e[0],n=e[1];var a=n[1]||r;s.set(a,r);if(n[0]&512){t.$attrsToReflect$.push([r,a])}return a}))}}return e};var initializeComponent=function(e,t,r,n,a){return __awaiter(void 0,void 0,void 0,(function(){var e,n,s,o,i,l,u;return __generator(this,(function(c){switch(c.label){case 0:if(!((t.$flags$&32)===0))return[3,3];t.$flags$|=32;a=loadModule(r);if(!a.then)return[3,2];e=uniqueTime();return[4,a];case 1:a=c.sent();e();c.label=2;case 2:if(!a.isProxied){{r.$watchers$=a.watchers}proxyComponent(a,r,2);a.isProxied=true}n=createTime("createInstance",r.$tagName$);{t.$flags$|=8}try{new a(t)}catch(e){consoleError(e)}{t.$flags$&=~8}{t.$flags$|=128}n();if(a.style){s=a.style;o=getScopeId(r);if(!styles.has(o)){i=createTime("registerStyles",r.$tagName$);registerStyle(o,s,!!(r.$flags$&1));i()}}c.label=3;case 3:l=t.$ancestorComponent$;u=function(){return scheduleUpdate(t,true)};if(l&&l["s-rc"]){l["s-rc"].push(u)}else{u()}return[2]}}))}))};var connectedCallback=function(e){if((plt.$flags$&1)===0){var t=getHostRef(e);var r=t.$cmpMeta$;var n=createTime("connectedCallback",r.$tagName$);if(!(t.$flags$&1)){t.$flags$|=1;{var a=e;while(a=a.parentNode||a.host){if(a["s-p"]){attachToAncestor(t,t.$ancestorComponent$=a);break}}}if(r.$members$){Object.entries(r.$members$).map((function(t){var r=t[0],n=t[1][0];if(n&31&&e.hasOwnProperty(r)){var a=e[r];delete e[r];e[r]=a}}))}{initializeComponent(e,t,r)}}else{addHostEventListeners(e,t,r.$listeners$)}n()}};var disconnectedCallback=function(e){if((plt.$flags$&1)===0){var t=getHostRef(e);{if(t.$rmListeners$){t.$rmListeners$.map((function(e){return e()}));t.$rmListeners$=undefined}}}};var bootstrapLazy=function(e,t){if(t===void 0){t={}}var r=createTime();var n=[];var a=t.exclude||[];var s=win.customElements;var o=doc.head;var i=o.querySelector("meta[charset]");var l=doc.createElement("style");var u=[];var c;var f=true;Object.assign(plt,t);plt.$resourcesUrl$=new URL(t.resourcesUrl||"./",doc.baseURI).href;e.map((function(e){e[1].map((function(t){var r={$flags$:t[0],$tagName$:t[1],$members$:t[2],$listeners$:t[3]};{r.$members$=t[2]}{r.$listeners$=t[3]}{r.$attrsToReflect$=[]}{r.$watchers$={}}var o=r.$tagName$;var i=function(e){__extends(t,e);function t(t){var n=e.call(this,t)||this;t=n;registerHost(t,r);if(r.$flags$&1){{{t.attachShadow({mode:"open"})}}}return n}t.prototype.connectedCallback=function(){var e=this;if(c){clearTimeout(c);c=null}if(f){u.push(this)}else{plt.jmp((function(){return connectedCallback(e)}))}};t.prototype.disconnectedCallback=function(){var e=this;plt.jmp((function(){return disconnectedCallback(e)}))};t.prototype.componentOnReady=function(){return getHostRef(this).$onReadyPromise$};return t}(HTMLElement);r.$lazyBundleId$=e[0];if(!a.includes(o)&&!s.get(o)){n.push(o);s.define(o,proxyComponent(i,r,1))}}))}));{l.innerHTML=n+HYDRATED_CSS;l.setAttribute("data-styles","");o.insertBefore(l,i?i.nextSibling:o.firstChild)}f=false;if(u.length){u.map((function(e){return e.connectedCallback()}))}else{{plt.jmp((function(){return c=setTimeout(appDidLoad,30)}))}}r()};var hostRefs=new WeakMap;var getHostRef=function(e){return hostRefs.get(e)};var registerInstance=function(e,t){return hostRefs.set(t.$lazyInstance$=e,t)};var registerHost=function(e,t){var r={$flags$:0,$hostElement$:e,$cmpMeta$:t,$instanceValues$:new Map};{r.$onReadyPromise$=new Promise((function(e){return r.$onReadyResolve$=e}));e["s-p"]=[];e["s-rc"]=[]}addHostEventListeners(e,r,t.$listeners$);return hostRefs.set(e,r)};var isMemberInElement=function(e,t){return t in e};var consoleError=function(e,t){return(0,console.error)(e,t)};var cmpModules=new Map;var loadModule=function(e,t,r){var n=e.$tagName$.replace(/-/g,"_");var a=e.$lazyBundleId$;var s=cmpModules.get(a);if(s){return s[n]}return import("./"+a+".entry.js"+"").then((function(e){{cmpModules.set(a,e)}return e[n]}),consoleError)};var styles=new Map;var queueDomReads=[];var queueDomWrites=[];var queueTask=function(e,t){return function(r){e.push(r);if(!queuePending){queuePending=true;if(t&&plt.$flags$&4){nextTick(flush)}else{plt.raf(flush)}}}};var consume=function(e){for(var t=0;t<e.length;t++){try{e[t](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};
|