@getflip/swirl-components 0.415.0 → 0.416.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/components.json +1 -7
- package/dist/cjs/index-C3lyTdWf.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-modal-shell.cjs.entry.js +3 -7
- package/dist/collection/components/swirl-modal-shell/swirl-modal-shell.css +35 -14
- package/dist/collection/components/swirl-modal-shell/swirl-modal-shell.js +2 -6
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -4
- package/dist/components/swirl-modal-shell.js +4 -14
- package/dist/esm/index-B8rkXMDv.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-modal-shell.entry.js +3 -7
- package/dist/swirl-components/p-d0929057.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-modal-shell/swirl-modal-shell.d.ts +1 -2
- package/package.json +1 -1
- package/dist/swirl-components/p-f28572d8.entry.js +0 -1
|
@@ -8,39 +8,60 @@
|
|
|
8
8
|
|
|
9
9
|
.modal-shell {
|
|
10
10
|
position: fixed;
|
|
11
|
+
inset: 0;
|
|
11
12
|
z-index: var(--s-z-40);
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.modal-shell__backdrop {
|
|
16
|
+
position: fixed;
|
|
15
17
|
inset: 0;
|
|
16
|
-
|
|
18
|
+
z-index: 1;
|
|
17
19
|
background-color: var(--s-translucent-medium-default);
|
|
20
|
+
opacity: 1;
|
|
21
|
+
-webkit-backdrop-filter: blur(var(--s-blur-l));
|
|
22
|
+
backdrop-filter: blur(var(--s-blur-l));
|
|
18
23
|
transition: opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;
|
|
19
24
|
transition: opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;
|
|
20
25
|
transition: opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;
|
|
21
|
-
-webkit-backdrop-filter: blur(var(--s-blur-l));
|
|
22
|
-
backdrop-filter: blur(var(--s-blur-l));
|
|
23
26
|
}
|
|
24
27
|
|
|
25
|
-
.modal-
|
|
26
|
-
|
|
28
|
+
.modal-shell__scroll-container {
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
position: fixed;
|
|
31
|
+
inset: 0;
|
|
27
32
|
z-index: 2;
|
|
28
|
-
|
|
33
|
+
display: grid;
|
|
29
34
|
padding: var(--s-space-24);
|
|
35
|
+
justify-content: center;
|
|
36
|
+
align-items: center;
|
|
37
|
+
}
|
|
30
38
|
|
|
39
|
+
.modal-shell__scroll-container__content {
|
|
31
40
|
opacity: 1;
|
|
32
41
|
transform: scale(1);
|
|
33
42
|
transition: opacity 0.2s ease-out,
|
|
34
43
|
transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1);
|
|
35
44
|
}
|
|
36
45
|
|
|
37
|
-
.modal-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
46
|
+
.modal-shell__close-button {
|
|
47
|
+
position: fixed;
|
|
48
|
+
top: var(--s-space-16);
|
|
49
|
+
right: var(--s-space-16);
|
|
50
|
+
z-index: 3;
|
|
51
|
+
opacity: 1;
|
|
52
|
+
transform: scale(1);
|
|
53
|
+
transition: opacity 0.2s ease-out,
|
|
54
|
+
transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1);
|
|
41
55
|
}
|
|
42
56
|
|
|
43
|
-
.modal-shell--closing .modal-
|
|
57
|
+
.modal-shell--closing .modal-shell__backdrop {
|
|
58
|
+
opacity: 0;
|
|
59
|
+
-webkit-backdrop-filter: blur(0px);
|
|
60
|
+
backdrop-filter: blur(0px);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.modal-shell--closing .modal-shell__scroll-container__content,
|
|
64
|
+
.modal-shell--closing .modal-shell__close-button {
|
|
44
65
|
opacity: 0;
|
|
45
66
|
transform: scale(1.1);
|
|
46
67
|
}
|
|
@@ -18,11 +18,7 @@ export class SwirlModalShell {
|
|
|
18
18
|
this.onContentClick = (event) => {
|
|
19
19
|
event.stopPropagation();
|
|
20
20
|
};
|
|
21
|
-
this.
|
|
22
|
-
event.stopPropagation();
|
|
23
|
-
this.close();
|
|
24
|
-
};
|
|
25
|
-
this.onModalClick = () => {
|
|
21
|
+
this.onClose = () => {
|
|
26
22
|
this.close();
|
|
27
23
|
};
|
|
28
24
|
}
|
|
@@ -55,7 +51,7 @@ export class SwirlModalShell {
|
|
|
55
51
|
const className = classnames("modal-shell", {
|
|
56
52
|
"modal-shell--closing": this.isClosing,
|
|
57
53
|
});
|
|
58
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: 'ba3be1d341d59e784148d40444dedcf89a5fa3b5' }, h("section", { key: 'ddb6de53386676639b675d2e7ea0c2ef2d37f5ee', "aria-label": this.label, role: "dialog", "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'f115ac537d57f81b6a023a71b929a1b89e60a30b', class: "modal-shell__backdrop" }), h("div", { key: '39269c4e266f5d26cfb8ade16654005cca95e872', class: "modal-shell__scroll-container", onClick: this.onClose }, h("div", { key: '229f8f4f23625391775a2ce6403e5e78ec75068d', class: "modal-shell__scroll-container__content", onClick: this.onContentClick }, h("slot", { key: '68034579aff85c6d8269b4140dd2777d0d40911a' }))), h("swirl-button", { key: 'daf100e59dbf8ebf47707ea9276546f6f4d3b86a', class: "modal-shell__close-button", icon: "<swirl-icon-close color='strong'></swirl-icon-close>", label: this.closeButtonLabel, hideLabel: true, variant: "translucent", onClick: this.onClose }))));
|
|
59
55
|
}
|
|
60
56
|
static get is() { return "swirl-modal-shell"; }
|
|
61
57
|
static get originalStyleUrls() {
|