@maggioli-design-system/mds-modal 1.0.1 → 1.0.2
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/loader.cjs.js +1 -1
- package/dist/cjs/mds-modal.cjs.entry.js +1 -1
- package/dist/cjs/mds-modal.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/mds-modal/mds-modal.css +12 -15
- package/dist/collection/components/mds-modal/test/mds-modal.stories.js +5 -9
- package/dist/{custom-elements → components}/index.d.ts +1 -20
- package/dist/components/index.js +1 -0
- package/dist/components/mds-modal.d.ts +11 -0
- package/dist/components/mds-modal.js +142 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mds-modal.entry.js +1 -1
- package/dist/esm/mds-modal.js +1 -1
- package/dist/esm-es5/mds-modal.entry.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-c4f8275b.system.entry.js +1 -0
- package/dist/mds-modal/p-d3c229eb.entry.js +1 -0
- package/{www/build/p-c8003e96.system.js → dist/mds-modal/p-d8cb77c3.system.js} +1 -1
- package/dist/stats.json +23 -21
- package/package.json +6 -5
- package/src/components/mds-modal/mds-modal.css +0 -1
- package/src/components/mds-modal/test/mds-modal.stories.js +5 -9
- package/src/components/mds-modal/test/mds-modal.stories.mdx +14 -0
- package/www/build/mds-modal.esm.js +1 -1
- package/www/build/mds-modal.js +1 -1
- package/www/build/p-c4f8275b.system.entry.js +1 -0
- package/www/build/p-d3c229eb.entry.js +1 -0
- package/{dist/mds-modal/p-c8003e96.system.js → www/build/p-d8cb77c3.system.js} +1 -1
- package/dist/custom-elements/index.js +0 -136
- package/dist/mds-modal/p-d10799a8.entry.js +0 -1
- package/dist/mds-modal/p-fda9967b.system.entry.js +0 -1
- package/dist/types/components/mds-modal/mds-modal.d.ts +0 -31
- package/www/build/p-d10799a8.entry.js +0 -1
- package/www/build/p-fda9967b.system.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-ced1b9b6.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
|
-
Stencil Client Patch Esm v2.
|
|
8
|
+
Stencil Client Patch Esm v2.12.0 | MIT Licensed | https://stenciljs.com
|
|
9
9
|
*/
|
|
10
10
|
const patchEsm = () => {
|
|
11
11
|
return index.promiseResolve();
|
|
@@ -45,7 +45,7 @@ function clsx () {
|
|
|
45
45
|
return str;
|
|
46
46
|
}
|
|
47
47
|
|
|
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:
|
|
48
|
+
const mdsModalCss = "*,::before,::after{border-color:currentColor;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.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]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
const index = require('./index-ced1b9b6.js');
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
|
-
Stencil Client Patch Browser v2.
|
|
6
|
+
Stencil Client Patch Browser v2.12.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));
|
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
*, ::before, ::after {
|
|
2
|
+
border-color: currentColor;
|
|
3
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
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 {
|
|
4
9
|
opacity: 0;
|
|
5
10
|
transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
|
|
6
|
-
transition-duration: 150ms;
|
|
7
11
|
transition-duration: 500ms;
|
|
8
12
|
transition-timing-function: cubic-bezier(1, 0, 0, 1);
|
|
9
13
|
}
|
|
10
|
-
|
|
11
|
-
.animate-right-intro,
|
|
14
|
+
.animate-right-intro,
|
|
12
15
|
.animate-right-outro {
|
|
13
16
|
transform: translateX(calc(100% + 50px));
|
|
14
17
|
}
|
|
@@ -16,7 +19,8 @@
|
|
|
16
19
|
border-width: 1px;
|
|
17
20
|
}
|
|
18
21
|
.shadow {
|
|
19
|
-
--tw-shadow: 0 1px 3px 0
|
|
22
|
+
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
23
|
+
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
|
20
24
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
21
25
|
}
|
|
22
26
|
|
|
@@ -30,7 +34,6 @@
|
|
|
30
34
|
display: flex;
|
|
31
35
|
align-items: center;
|
|
32
36
|
justify-content: center;
|
|
33
|
-
--tw-bg-opacity: 1;
|
|
34
37
|
background-color: rgba(var(--adjust-tone-01), var(--tw-bg-opacity));
|
|
35
38
|
--tw-bg-opacity: 0;
|
|
36
39
|
transition-duration: 700ms;
|
|
@@ -58,10 +61,8 @@
|
|
|
58
61
|
color: rgba(var(--adjust-tone-10), var(--tw-text-opacity));
|
|
59
62
|
opacity: 0;
|
|
60
63
|
transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
|
|
61
|
-
transition-duration: 150ms;
|
|
62
64
|
transition-duration: 500ms;
|
|
63
65
|
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
|
|
64
|
-
text-shadow: 0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);
|
|
65
66
|
|
|
66
67
|
transform: translate(0, 24px) rotate(90deg);
|
|
67
68
|
}
|
|
@@ -73,7 +74,7 @@
|
|
|
73
74
|
overflow: auto;
|
|
74
75
|
|
|
75
76
|
background-color: var(--window-background, rgb(var(--adjust-tone)));
|
|
76
|
-
box-shadow: var(--window-shadow, 0 25px 50px -12px
|
|
77
|
+
box-shadow: var(--window-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));
|
|
77
78
|
grid-template-rows: 1fr;
|
|
78
79
|
|
|
79
80
|
/* grid-template-rows: var(--grid-template-rows, auto 1fr auto); */
|
|
@@ -98,7 +99,6 @@
|
|
|
98
99
|
}
|
|
99
100
|
|
|
100
101
|
@media (max-width: 767px) {
|
|
101
|
-
|
|
102
102
|
:host ( .animate-center ) {
|
|
103
103
|
padding: 1rem;
|
|
104
104
|
}
|
|
@@ -107,7 +107,6 @@
|
|
|
107
107
|
:host ( .animate-center ) .window, :host ( .animate-center ) > ::slotted ( [slot=window] ) {
|
|
108
108
|
opacity: 0;
|
|
109
109
|
transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
|
|
110
|
-
transition-duration: 150ms;
|
|
111
110
|
transition-duration: 500ms;
|
|
112
111
|
transition-timing-function: cubic-bezier(1, 0, 0, 1);
|
|
113
112
|
}
|
|
@@ -134,7 +133,6 @@
|
|
|
134
133
|
:host ( .animate-right ) .window, :host ( .animate-right ) > ::slotted ( [slot=window] ) {
|
|
135
134
|
opacity: 0;
|
|
136
135
|
transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
|
|
137
|
-
transition-duration: 150ms;
|
|
138
136
|
transition-duration: 500ms;
|
|
139
137
|
transition-timing-function: cubic-bezier(1, 0, 0, 1);
|
|
140
138
|
}
|
|
@@ -177,7 +175,6 @@
|
|
|
177
175
|
:host ( .animate-left ) .window, :host ( .animate-left ) > ::slotted ( [slot=window] ) {
|
|
178
176
|
opacity: 0;
|
|
179
177
|
transition-property: background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;
|
|
180
|
-
transition-duration: 150ms;
|
|
181
178
|
transition-duration: 500ms;
|
|
182
179
|
transition-timing-function: cubic-bezier(1, 0, 0, 1);
|
|
183
180
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import faker from 'faker'
|
|
3
2
|
import MdsModal from '@component/mds-modal/mds-modal'
|
|
4
3
|
|
|
5
4
|
import { modalPositionDictionary } from '../meta/dictionary'
|
|
@@ -21,13 +20,10 @@ export default {
|
|
|
21
20
|
},
|
|
22
21
|
}
|
|
23
22
|
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const text = faker.lorem.paragraphs(3)
|
|
27
|
-
const firstName = faker.name.firstName(1)
|
|
28
|
-
const lastName = faker.name.lastName(1)
|
|
23
|
+
const firstName = 'Mario'
|
|
24
|
+
const lastName = 'Rossi'
|
|
29
25
|
const fullName = `${firstName} ${lastName}`
|
|
30
|
-
const email =
|
|
26
|
+
const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com`
|
|
31
27
|
|
|
32
28
|
const Template = args =>
|
|
33
29
|
<mds-modal {...args}>
|
|
@@ -40,7 +36,7 @@ const Template = args =>
|
|
|
40
36
|
</header>
|
|
41
37
|
<div className="p-8 max-w-lg">
|
|
42
38
|
<mds-text>
|
|
43
|
-
|
|
39
|
+
As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.
|
|
44
40
|
</mds-text>
|
|
45
41
|
</div>
|
|
46
42
|
<footer slot="bottom" className="p-8 max-w-lg flex gap-4 text-adjust-tone-02 border-t border-adjust-tone-09">
|
|
@@ -57,7 +53,7 @@ const CustomTemplate = args =>
|
|
|
57
53
|
<mds-modal {...args}>
|
|
58
54
|
<mds-banner slot="window" class="max-w-xl" deletable headline="Action required">
|
|
59
55
|
<mds-text typography="detail">
|
|
60
|
-
|
|
56
|
+
As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.
|
|
61
57
|
</mds-text>
|
|
62
58
|
<mds-button slot="actions" variant="primary" tone="quiet">Cancel</mds-button>
|
|
63
59
|
<mds-button slot="actions" variant="primary">Confirm</mds-button>
|
|
@@ -1,25 +1,7 @@
|
|
|
1
|
-
/* MdsModal custom elements
|
|
1
|
+
/* MdsModal custom elements */
|
|
2
2
|
|
|
3
3
|
import type { Components, JSX } from "../types/components";
|
|
4
4
|
|
|
5
|
-
interface MdsModal extends Components.MdsModal, HTMLElement {}
|
|
6
|
-
export const MdsModal: {
|
|
7
|
-
prototype: MdsModal;
|
|
8
|
-
new (): MdsModal;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Utility to define all custom elements within this package using the tag name provided in the component's source.
|
|
13
|
-
* When defining each custom element, it will also check it's safe to define by:
|
|
14
|
-
*
|
|
15
|
-
* 1. Ensuring the "customElements" registry is available in the global context (window).
|
|
16
|
-
* 2. The component tag name is not already defined.
|
|
17
|
-
*
|
|
18
|
-
* Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
|
|
19
|
-
* method instead to define custom elements individually, or to provide a different tag name.
|
|
20
|
-
*/
|
|
21
|
-
export declare const defineCustomElements: (opts?: any) => void;
|
|
22
|
-
|
|
23
5
|
/**
|
|
24
6
|
* Used to manually set the base path where assets can be found.
|
|
25
7
|
* If the script is used as "module", it's recommended to use "import.meta.url",
|
|
@@ -36,7 +18,6 @@ export interface SetPlatformOptions {
|
|
|
36
18
|
raf?: (c: FrameRequestCallback) => number;
|
|
37
19
|
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
38
20
|
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
39
|
-
ce?: (eventName: string, opts?: any) => CustomEvent;
|
|
40
21
|
}
|
|
41
22
|
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
42
23
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface MdsModal extends Components.MdsModal, HTMLElement {}
|
|
4
|
+
export const MdsModal: {
|
|
5
|
+
prototype: MdsModal;
|
|
6
|
+
new (): MdsModal;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
function toVal(mix) {
|
|
4
|
+
var k, y, str='';
|
|
5
|
+
|
|
6
|
+
if (typeof mix === 'string' || typeof mix === 'number') {
|
|
7
|
+
str += mix;
|
|
8
|
+
} else if (typeof mix === 'object') {
|
|
9
|
+
if (Array.isArray(mix)) {
|
|
10
|
+
for (k=0; k < mix.length; k++) {
|
|
11
|
+
if (mix[k]) {
|
|
12
|
+
if (y = toVal(mix[k])) {
|
|
13
|
+
str && (str += ' ');
|
|
14
|
+
str += y;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
} else {
|
|
19
|
+
for (k in mix) {
|
|
20
|
+
if (mix[k]) {
|
|
21
|
+
str && (str += ' ');
|
|
22
|
+
str += k;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return str;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function clsx () {
|
|
32
|
+
var i=0, tmp, x, str='';
|
|
33
|
+
while (i < arguments.length) {
|
|
34
|
+
if (tmp = arguments[i++]) {
|
|
35
|
+
if (x = toVal(tmp)) {
|
|
36
|
+
str && (str += ' ');
|
|
37
|
+
str += x;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
return str;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const mdsModalCss = "*,::before,::after{border-color:currentColor;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.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]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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
|
+
|
|
46
|
+
let MdsModal$1 = class extends HTMLElement {
|
|
47
|
+
constructor() {
|
|
48
|
+
super();
|
|
49
|
+
this.__registerHost();
|
|
50
|
+
this.__attachShadow();
|
|
51
|
+
this.close = createEvent(this, "close", 7);
|
|
52
|
+
this.window = null;
|
|
53
|
+
this.top = null;
|
|
54
|
+
this.bottom = null;
|
|
55
|
+
this.animationState = 'intro';
|
|
56
|
+
/**
|
|
57
|
+
* Specifies the animation position of the modal window
|
|
58
|
+
*/
|
|
59
|
+
this.position = null;
|
|
60
|
+
this.animationName = (customState = null, customPosition = null) => {
|
|
61
|
+
return `animate-${customPosition !== null ? customPosition : this.position}${customState !== null ? '-' + customState : ''}`;
|
|
62
|
+
};
|
|
63
|
+
this.closeModal = (e = null) => {
|
|
64
|
+
this.opened = e.target !== e.currentTarget;
|
|
65
|
+
if (!this.opened) {
|
|
66
|
+
this.close.emit();
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
componentWillLoad() {
|
|
71
|
+
this.bottom = this.hostElement.querySelector('[slot="bottom"]') !== null;
|
|
72
|
+
this.top = this.hostElement.querySelector('[slot="top"]') !== null;
|
|
73
|
+
this.window = this.hostElement.querySelector('[slot="window"]') !== null;
|
|
74
|
+
if (this.window && this.position === null) {
|
|
75
|
+
this.position = 'center';
|
|
76
|
+
}
|
|
77
|
+
if (this.position === null) {
|
|
78
|
+
this.position = 'right';
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
componentWillRender() {
|
|
82
|
+
this.animationState = this.opened ? 'intro' : 'outro';
|
|
83
|
+
this.hostElement.classList.add(this.animationName());
|
|
84
|
+
}
|
|
85
|
+
componentDidRender() {
|
|
86
|
+
this.animationDeelay = window.setTimeout(() => {
|
|
87
|
+
this.animationState = this.animationState === 'intro' ? 'outro' : 'intro';
|
|
88
|
+
this.hostElement.classList.remove(this.animationName(this.animationState === 'intro' ? 'outro' : 'intro'));
|
|
89
|
+
this.hostElement.classList.add(this.animationName(this.animationState));
|
|
90
|
+
window.clearTimeout(this.animationDeelay);
|
|
91
|
+
}, 500);
|
|
92
|
+
}
|
|
93
|
+
positionChange(_newValue, oldValue) {
|
|
94
|
+
window.clearTimeout(this.animationDeelay);
|
|
95
|
+
this.hostElement.classList.remove(this.animationName(null, oldValue));
|
|
96
|
+
this.hostElement.classList.remove(this.animationName('intro', oldValue));
|
|
97
|
+
this.hostElement.classList.remove(this.animationName('outro', oldValue));
|
|
98
|
+
}
|
|
99
|
+
openedChange() {
|
|
100
|
+
window.clearTimeout(this.animationDeelay);
|
|
101
|
+
}
|
|
102
|
+
onCloseListener() {
|
|
103
|
+
this.opened = false;
|
|
104
|
+
}
|
|
105
|
+
render() {
|
|
106
|
+
return (h(Host, { class: clsx(this.opened && this.animationName('opened')), onClick: (e) => { this.closeModal(e); } }, this.window
|
|
107
|
+
?
|
|
108
|
+
h("slot", { name: "window" })
|
|
109
|
+
:
|
|
110
|
+
h("div", { class: clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`) }, this.top &&
|
|
111
|
+
h("slot", { name: "top" }), h("slot", null), this.bottom &&
|
|
112
|
+
h("slot", { name: "bottom" })), !this.window && h("mds-icon", { name: "close", class: "close" })));
|
|
113
|
+
}
|
|
114
|
+
get hostElement() { return this; }
|
|
115
|
+
static get watchers() { return {
|
|
116
|
+
"position": ["positionChange"],
|
|
117
|
+
"opened": ["openedChange"]
|
|
118
|
+
}; }
|
|
119
|
+
static get style() { return mdsModalCss; }
|
|
120
|
+
};
|
|
121
|
+
MdsModal$1 = /*@__PURE__*/ proxyCustomElement(MdsModal$1, [1, "mds-modal", {
|
|
122
|
+
"opened": [1540],
|
|
123
|
+
"position": [1537]
|
|
124
|
+
}, [[0, "close", "onCloseListener"]]]);
|
|
125
|
+
function defineCustomElement$1() {
|
|
126
|
+
if (typeof customElements === "undefined") {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
const components = ["mds-modal"];
|
|
130
|
+
components.forEach(tagName => { switch (tagName) {
|
|
131
|
+
case "mds-modal":
|
|
132
|
+
if (!customElements.get(tagName)) {
|
|
133
|
+
customElements.define(tagName, MdsModal$1);
|
|
134
|
+
}
|
|
135
|
+
break;
|
|
136
|
+
} });
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
const MdsModal = MdsModal$1;
|
|
140
|
+
const defineCustomElement = defineCustomElement$1;
|
|
141
|
+
|
|
142
|
+
export { MdsModal, defineCustomElement };
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as promiseResolve, b as bootstrapLazy } from './index-7d5b7d79.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
|
-
Stencil Client Patch Esm v2.
|
|
4
|
+
Stencil Client Patch Esm v2.12.0 | MIT Licensed | https://stenciljs.com
|
|
5
5
|
*/
|
|
6
6
|
const patchEsm = () => {
|
|
7
7
|
return promiseResolve();
|
|
@@ -41,7 +41,7 @@ function clsx () {
|
|
|
41
41
|
return str;
|
|
42
42
|
}
|
|
43
43
|
|
|
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:
|
|
44
|
+
const mdsModalCss = "*,::before,::after{border-color:currentColor;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.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]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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) {
|
package/dist/esm/mds-modal.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as promiseResolve, b as bootstrapLazy } from './index-7d5b7d79.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
|
-
Stencil Client Patch Browser v2.
|
|
4
|
+
Stencil Client Patch Browser v2.12.0 | MIT Licensed | https://stenciljs.com
|
|
5
5
|
*/
|
|
6
6
|
const patchBrowser = () => {
|
|
7
7
|
const importMeta = import.meta.url;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-7d5b7d79.js";function toVal(t){var o,i,n="";if(typeof t==="string"||typeof t==="number"){n+=t}else if(typeof t==="object"){if(Array.isArray(t)){for(o=0;o<t.length;o++){if(t[o]){if(i=toVal(t[o])){n&&(n+=" ");n+=i}}}}else{for(o in t){if(t[o]){n&&(n+=" ");n+=o}}}}return n}function clsx(){var t=0,o,i,n="";while(t<arguments.length){if(o=arguments[t++]){if(i=toVal(o)){n&&(n+=" ");n+=i}}}return n}var 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:150ms;transition-duration:150ms;-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 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);-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;--tw-bg-opacity:1;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:150ms;transition-duration:150ms;-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);text-shadow:0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%);-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 rgba(0, 0, 0, 0.25));box-shadow:var(--window-shadow, 0 25px 50px -12px rgba(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:150ms;transition-duration:150ms;-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]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}: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:150ms;transition-duration:150ms;-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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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:150ms;transition-duration:150ms;-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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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)}";var MdsModal=function(){function t(t){var o=this;registerInstance(this,t);this.close=createEvent(this,"close",7);this.window=null;this.top=null;this.bottom=null;this.animationState="intro";this.position=null;this.animationName=function(t,i){if(t===void 0){t=null}if(i===void 0){i=null}return"animate-"+(i!==null?i:o.position)+(t!==null?"-"+t:"")};this.closeModal=function(t){if(t===void 0){t=null}o.opened=t.target!==t.currentTarget;if(!o.opened){o.close.emit()}}}t.prototype.componentWillLoad=function(){this.bottom=this.hostElement.querySelector('[slot="bottom"]')!==null;this.top=this.hostElement.querySelector('[slot="top"]')!==null;this.window=this.hostElement.querySelector('[slot="window"]')!==null;if(this.window&&this.position===null){this.position="center"}if(this.position===null){this.position="right"}};t.prototype.componentWillRender=function(){this.animationState=this.opened?"intro":"outro";this.hostElement.classList.add(this.animationName())};t.prototype.componentDidRender=function(){var t=this;this.animationDeelay=window.setTimeout((function(){t.animationState=t.animationState==="intro"?"outro":"intro";t.hostElement.classList.remove(t.animationName(t.animationState==="intro"?"outro":"intro"));t.hostElement.classList.add(t.animationName(t.animationState));window.clearTimeout(t.animationDeelay)}),500)};t.prototype.positionChange=function(t,o){window.clearTimeout(this.animationDeelay);this.hostElement.classList.remove(this.animationName(null,o));this.hostElement.classList.remove(this.animationName("intro",o));this.hostElement.classList.remove(this.animationName("outro",o))};t.prototype.openedChange=function(){window.clearTimeout(this.animationDeelay)};t.prototype.onCloseListener=function(){this.opened=false};t.prototype.render=function(){var t=this;return h(Host,{class:clsx(this.opened&&this.animationName("opened")),onClick:function(o){t.closeModal(o)}},this.window?h("slot",{name:"window"}):h("div",{class:clsx("window",(this.top||this.bottom)&&"window-"+(this.top?"-top":"")+(this.bottom?"-bottom":""))},this.top&&h("slot",{name:"top"}),h("slot",null),this.bottom&&h("slot",{name:"bottom"})),!this.window&&h("mds-icon",{name:"close",class:"close"}))};Object.defineProperty(t.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{position:["positionChange"],opened:["openedChange"]}},enumerable:false,configurable:true});return t}();MdsModal.style=mdsModalCss;export{MdsModal as mds_modal};
|
|
1
|
+
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-7d5b7d79.js";function toVal(t){var o,i,e="";if(typeof t==="string"||typeof t==="number"){e+=t}else if(typeof t==="object"){if(Array.isArray(t)){for(o=0;o<t.length;o++){if(t[o]){if(i=toVal(t[o])){e&&(e+=" ");e+=i}}}}else{for(o in t){if(t[o]){e&&(e+=" ");e+=o}}}}return e}function clsx(){var t=0,o,i,e="";while(t<arguments.length){if(o=arguments[t++]){if(i=toVal(o)){e&&(e+=" ");e+=i}}}return e}var mdsModalCss="*,::before,::after{border-color:currentColor;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.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]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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)}";var MdsModal=function(){function t(t){var o=this;registerInstance(this,t);this.close=createEvent(this,"close",7);this.window=null;this.top=null;this.bottom=null;this.animationState="intro";this.position=null;this.animationName=function(t,i){if(t===void 0){t=null}if(i===void 0){i=null}return"animate-"+(i!==null?i:o.position)+(t!==null?"-"+t:"")};this.closeModal=function(t){if(t===void 0){t=null}o.opened=t.target!==t.currentTarget;if(!o.opened){o.close.emit()}}}t.prototype.componentWillLoad=function(){this.bottom=this.hostElement.querySelector('[slot="bottom"]')!==null;this.top=this.hostElement.querySelector('[slot="top"]')!==null;this.window=this.hostElement.querySelector('[slot="window"]')!==null;if(this.window&&this.position===null){this.position="center"}if(this.position===null){this.position="right"}};t.prototype.componentWillRender=function(){this.animationState=this.opened?"intro":"outro";this.hostElement.classList.add(this.animationName())};t.prototype.componentDidRender=function(){var t=this;this.animationDeelay=window.setTimeout((function(){t.animationState=t.animationState==="intro"?"outro":"intro";t.hostElement.classList.remove(t.animationName(t.animationState==="intro"?"outro":"intro"));t.hostElement.classList.add(t.animationName(t.animationState));window.clearTimeout(t.animationDeelay)}),500)};t.prototype.positionChange=function(t,o){window.clearTimeout(this.animationDeelay);this.hostElement.classList.remove(this.animationName(null,o));this.hostElement.classList.remove(this.animationName("intro",o));this.hostElement.classList.remove(this.animationName("outro",o))};t.prototype.openedChange=function(){window.clearTimeout(this.animationDeelay)};t.prototype.onCloseListener=function(){this.opened=false};t.prototype.render=function(){var t=this;return h(Host,{class:clsx(this.opened&&this.animationName("opened")),onClick:function(o){t.closeModal(o)}},this.window?h("slot",{name:"window"}):h("div",{class:clsx("window",(this.top||this.bottom)&&"window-"+(this.top?"-top":"")+(this.bottom?"-bottom":""))},this.top&&h("slot",{name:"top"}),h("slot",null),this.bottom&&h("slot",{name:"bottom"})),!this.window&&h("mds-icon",{name:"close",class:"close"}))};Object.defineProperty(t.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{position:["positionChange"],opened:["openedChange"]}},enumerable:false,configurable:true});return t}();MdsModal.style=mdsModalCss;export{MdsModal as mds_modal};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as o,b as
|
|
1
|
+
import{p as o,b as e}from"./p-818ca69a.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),o(s)})().then((o=>e([["p-d3c229eb",[[1,"mds-modal",{opened:[1540],position:[1537]},[[0,"close","onCloseListener"]]]]]],o)));
|
|
@@ -114,7 +114,7 @@ DOMTokenList
|
|
|
114
114
|
|
|
115
115
|
var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
|
|
116
116
|
var start = function() {
|
|
117
|
-
var url = new URL('./p-
|
|
117
|
+
var url = new URL('./p-d8cb77c3.system.js', new URL(resourcesUrl, window.location.origin));
|
|
118
118
|
System.import(url.href);
|
|
119
119
|
};
|
|
120
120
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
System.register(["./p-0fa95990.system.js"],(function(t){"use strict";var o,i,r,e,n;return{setters:[function(t){o=t.r;i=t.c;r=t.h;e=t.H;n=t.g}],execute:function(){function a(t){var o,i,r="";if(typeof t==="string"||typeof t==="number"){r+=t}else if(typeof t==="object"){if(Array.isArray(t)){for(o=0;o<t.length;o++){if(t[o]){if(i=a(t[o])){r&&(r+=" ");r+=i}}}}else{for(o in t){if(t[o]){r&&(r+=" ");r+=o}}}}return r}function s(){var t=0,o,i,r="";while(t<arguments.length){if(o=arguments[t++]){if(i=a(o)){r&&(r+=" ");r+=i}}}return r}var d="*,::before,::after{border-color:currentColor;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.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]){-webkit-transform:rotateX(0) scale(1) translateY(0);transform:rotateX(0) scale(1) translateY(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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]){-webkit-transform:translateX(0);transform:translateX(0);opacity:1}: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)}";var l=t("mds_modal",function(){function t(t){var r=this;o(this,t);this.close=i(this,"close",7);this.window=null;this.top=null;this.bottom=null;this.animationState="intro";this.position=null;this.animationName=function(t,o){if(t===void 0){t=null}if(o===void 0){o=null}return"animate-"+(o!==null?o:r.position)+(t!==null?"-"+t:"")};this.closeModal=function(t){if(t===void 0){t=null}r.opened=t.target!==t.currentTarget;if(!r.opened){r.close.emit()}}}t.prototype.componentWillLoad=function(){this.bottom=this.hostElement.querySelector('[slot="bottom"]')!==null;this.top=this.hostElement.querySelector('[slot="top"]')!==null;this.window=this.hostElement.querySelector('[slot="window"]')!==null;if(this.window&&this.position===null){this.position="center"}if(this.position===null){this.position="right"}};t.prototype.componentWillRender=function(){this.animationState=this.opened?"intro":"outro";this.hostElement.classList.add(this.animationName())};t.prototype.componentDidRender=function(){var t=this;this.animationDeelay=window.setTimeout((function(){t.animationState=t.animationState==="intro"?"outro":"intro";t.hostElement.classList.remove(t.animationName(t.animationState==="intro"?"outro":"intro"));t.hostElement.classList.add(t.animationName(t.animationState));window.clearTimeout(t.animationDeelay)}),500)};t.prototype.positionChange=function(t,o){window.clearTimeout(this.animationDeelay);this.hostElement.classList.remove(this.animationName(null,o));this.hostElement.classList.remove(this.animationName("intro",o));this.hostElement.classList.remove(this.animationName("outro",o))};t.prototype.openedChange=function(){window.clearTimeout(this.animationDeelay)};t.prototype.onCloseListener=function(){this.opened=false};t.prototype.render=function(){var t=this;return r(e,{class:s(this.opened&&this.animationName("opened")),onClick:function(o){t.closeModal(o)}},this.window?r("slot",{name:"window"}):r("div",{class:s("window",(this.top||this.bottom)&&"window-"+(this.top?"-top":"")+(this.bottom?"-bottom":""))},this.top&&r("slot",{name:"top"}),r("slot",null),this.bottom&&r("slot",{name:"bottom"})),!this.window&&r("mds-icon",{name:"close",class:"close"}))};Object.defineProperty(t.prototype,"hostElement",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{position:["positionChange"],opened:["openedChange"]}},enumerable:false,configurable:true});return t}());l.style=d}}}));
|