@getflip/swirl-components 0.360.0 → 0.361.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 -1
- package/dist/cjs/swirl-modal.cjs.entry.js +24 -19
- package/dist/collection/components/swirl-modal/swirl-modal.js +24 -19
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +28 -0
- package/dist/components/swirl-modal.js +24 -19
- package/dist/esm/swirl-modal.entry.js +24 -19
- package/dist/swirl-components/p-a6609f84.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-modal/swirl-modal.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-c8e2dee8.entry.js +0 -1
package/components.json
CHANGED
|
@@ -4,6 +4,7 @@ var index = require('./index-DM-IG6w2.js');
|
|
|
4
4
|
var bodyScrollLock_esm = require('./bodyScrollLock.esm-DMDeaEpJ.js');
|
|
5
5
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
6
6
|
var focusTrap_esm = require('./focus-trap.esm-kePK98yh.js');
|
|
7
|
+
var utils = require('./utils-Br2wWntR.js');
|
|
7
8
|
|
|
8
9
|
const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) +\n var(--swirl-modal-max-secondary-content-width)\n )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)\n )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,\n max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +\n var(--swirl-modal-max-secondary-content-width)\n )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
|
|
9
10
|
|
|
@@ -97,17 +98,6 @@ const SwirlModal = class {
|
|
|
97
98
|
};
|
|
98
99
|
}
|
|
99
100
|
componentDidLoad() {
|
|
100
|
-
this.focusTrap = focusTrap_esm.createFocusTrap(this.modalEl, {
|
|
101
|
-
allowOutsideClick: true,
|
|
102
|
-
// We don't always close the modal when ESC is pressed. So we manage the
|
|
103
|
-
// deactivation of the focus trap manually.
|
|
104
|
-
escapeDeactivates: false,
|
|
105
|
-
tabbableOptions: {
|
|
106
|
-
getShadowRoot: (node) => {
|
|
107
|
-
return node.shadowRoot;
|
|
108
|
-
},
|
|
109
|
-
},
|
|
110
|
-
});
|
|
111
101
|
this.determineScrollStatus();
|
|
112
102
|
this.updateCustomFooterStatus();
|
|
113
103
|
this.updateCustomHeaderStatus();
|
|
@@ -132,6 +122,7 @@ const SwirlModal = class {
|
|
|
132
122
|
async open() {
|
|
133
123
|
this.isOpen = true;
|
|
134
124
|
this.modalOpen.emit();
|
|
125
|
+
this.setupFocusTrap();
|
|
135
126
|
setTimeout(() => {
|
|
136
127
|
this.lockBodyScroll();
|
|
137
128
|
this.determineScrollStatus();
|
|
@@ -195,6 +186,20 @@ const SwirlModal = class {
|
|
|
195
186
|
bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
|
|
196
187
|
bodyScrollLock_esm.disableBodyScroll(this.sidebarScrollContainer);
|
|
197
188
|
}
|
|
189
|
+
setupFocusTrap() {
|
|
190
|
+
this.focusTrap = focusTrap_esm.createFocusTrap(this.modalEl, {
|
|
191
|
+
allowOutsideClick: true,
|
|
192
|
+
setReturnFocus: utils.getActiveElement(),
|
|
193
|
+
// We don't always close the modal when ESC is pressed. So we manage the
|
|
194
|
+
// deactivation of the focus trap manually.
|
|
195
|
+
escapeDeactivates: false,
|
|
196
|
+
tabbableOptions: {
|
|
197
|
+
getShadowRoot: (node) => {
|
|
198
|
+
return node.shadowRoot;
|
|
199
|
+
},
|
|
200
|
+
},
|
|
201
|
+
});
|
|
202
|
+
}
|
|
198
203
|
unlockBodyScroll() {
|
|
199
204
|
if (this.scrollContainer) {
|
|
200
205
|
bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
|
|
@@ -230,29 +235,29 @@ const SwirlModal = class {
|
|
|
230
235
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
231
236
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
232
237
|
});
|
|
233
|
-
return (index.h(index.Host, { key: '
|
|
238
|
+
return (index.h(index.Host, { key: 'c5c1e9d205414a6703f29de9cb94ca31d0b2e53e' }, index.h("section", { key: '147ee8b41dbb009b0c42cb0cbd47b4e4b2236ede', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'c5581d8ad582064afbbeb131c1767de2665c4a0d', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '1cbd4e90ce8aea3452c1256af3869e69711ed470', class: "modal__body", style: !this.isFullscreen
|
|
234
239
|
? {
|
|
235
240
|
"--swirl-modal-max-height": this.maxHeight,
|
|
236
241
|
"--swirl-modal-height": this.height,
|
|
237
242
|
minHeight: this.minHeight,
|
|
238
243
|
maxWidth: this.maxWidth,
|
|
239
244
|
}
|
|
240
|
-
: {} }, index.h("aside", { key: '
|
|
245
|
+
: {} }, index.h("aside", { key: 'b5dc4279da991e8db9601e3a03bdb5d7d7519a3b', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '182b2e194d44bb34bc7208329f6c560bdc031a90', class: index$1.classnames("modal__sidebar-header", {
|
|
241
246
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
242
|
-
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '
|
|
247
|
+
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '3c8297ccb8edb389ccb1ba88e7ffdb2769837d72', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '02950b7a7d448fc7e77fea7d12ca073e367622b8', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '73f7fd8f43bb72470e6eb9fefd32eee81234e7ff', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '5004305bf8fecaf91a50907c07920fc44754362c', name: "sidebar-content" })), index.h("div", { key: '4f661235c09bb4b730d31a8159f44a3357adcaff', class: "modal__sidebar-footer" }, index.h("slot", { key: '4a566e09e71f6acb2c8431cec8985a4bb6185395', name: "sidebar-footer" }))), index.h("div", { key: '5e95bda60c880712cb063ae6ed67ea8964aabbe3', class: "modal__main-content" }, index.h("header", { key: '7b3f4be5bb206c96c517ad6dea314d35dda19fbb', class: "modal__custom-header" }, index.h("slot", { key: '802cb431d703e2dc5a6854716e00267518655cae', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '05f41ca8a6f6c668e412bbd8b1a0f7c25f4a3ae5', class: "modal__header" }, index.h("div", { key: '5946fb4497f1be9d5d542ef721c419a7e988f10b', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'd631408b4ac4b107525d60649d7118144085f2c9', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
243
248
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
244
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '
|
|
249
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'efdbb168513ba5faded2a3e68792f29eea3a73cc', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
245
250
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
246
251
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
247
252
|
? this.fullscreenDisableButtonLabel
|
|
248
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '
|
|
253
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'd9d93c08677a3c0a456b5d4c7a9d7fdcc44a6148', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'a9056a4b722d0a3891e5e902613e7054d557729c', class: "modal__content-container", style: {
|
|
249
254
|
gap: this.contentGap
|
|
250
255
|
? `var(--s-space-${this.contentGap})`
|
|
251
256
|
: undefined,
|
|
252
|
-
} }, index.h("div", { key: '
|
|
257
|
+
} }, index.h("div", { key: 'c1367de68040ff0b637efa7a7eb66b361320fca6', class: "modal__primary-content", style: {
|
|
253
258
|
maxWidth: this.primaryContentMaxWidth,
|
|
254
259
|
flex: this.primaryContentFlex,
|
|
255
|
-
} }, index.h("div", { key: '
|
|
260
|
+
} }, index.h("div", { key: '9c729f9350a144e8b7af8e07c1f0d69cd320c4a6', class: "modal__header-tools" }, index.h("slot", { key: '488d261460a865fd207acd9031ad3bf8e53e9899', name: "header-tools" })), index.h("div", { key: 'c960da07fa2190d4af907d05801f61ecaf4dae4e', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: 'ff5be4e790eacffbce4ae3d67d43a1ba75f6a760' }))), index.h("div", { key: '89d368198cdc7156ca143ab9fcdbf9bf56cd7772', class: "modal__secondary-content", style: {
|
|
256
261
|
maxWidth: this.secondaryContentMaxWidth,
|
|
257
262
|
flex: this.secondaryContentFlex,
|
|
258
263
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -270,7 +275,7 @@ const SwirlModal = class {
|
|
|
270
275
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
271
276
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
272
277
|
: undefined,
|
|
273
|
-
} }, index.h("slot", { key: '
|
|
278
|
+
} }, index.h("slot", { key: 'a4fc64dfed01d834f883ce21499178c60d5e8502', name: "secondary-content" }))), index.h("div", { key: '53044266cf7b39f383e28de0b33ff5d095bcb3bb', class: "modal__custom-footer" }, index.h("slot", { key: '25681e2fd02c846a8b9cdcfa951799730ef06f5b', name: "custom-footer" })), showControls && (index.h("footer", { key: 'a65853a33d5b554b18bcc141611d2470f22e6aad', class: "modal__controls" }, index.h("swirl-button-group", { key: '114cb44c508028261d83d958d3d7030c4f7d4771', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '7a6ef1b9e54a746ebba3d94ae11e56151c8bfa54', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '3e4a90e77da254714a95ee1e4f6c83193b17f6dc', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
274
279
|
}
|
|
275
280
|
get el() { return index.getElement(this); }
|
|
276
281
|
};
|
|
@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
|
|
|
2
2
|
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
|
|
3
3
|
import classnames from "classnames";
|
|
4
4
|
import * as focusTrap from "focus-trap";
|
|
5
|
+
import { getActiveElement } from "../../utils";
|
|
5
6
|
/**
|
|
6
7
|
* @slot slot - Modal contents
|
|
7
8
|
* @slot secondary-content - Secondary content
|
|
@@ -93,17 +94,6 @@ export class SwirlModal {
|
|
|
93
94
|
};
|
|
94
95
|
}
|
|
95
96
|
componentDidLoad() {
|
|
96
|
-
this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
|
|
97
|
-
allowOutsideClick: true,
|
|
98
|
-
// We don't always close the modal when ESC is pressed. So we manage the
|
|
99
|
-
// deactivation of the focus trap manually.
|
|
100
|
-
escapeDeactivates: false,
|
|
101
|
-
tabbableOptions: {
|
|
102
|
-
getShadowRoot: (node) => {
|
|
103
|
-
return node.shadowRoot;
|
|
104
|
-
},
|
|
105
|
-
},
|
|
106
|
-
});
|
|
107
97
|
this.determineScrollStatus();
|
|
108
98
|
this.updateCustomFooterStatus();
|
|
109
99
|
this.updateCustomHeaderStatus();
|
|
@@ -128,6 +118,7 @@ export class SwirlModal {
|
|
|
128
118
|
async open() {
|
|
129
119
|
this.isOpen = true;
|
|
130
120
|
this.modalOpen.emit();
|
|
121
|
+
this.setupFocusTrap();
|
|
131
122
|
setTimeout(() => {
|
|
132
123
|
this.lockBodyScroll();
|
|
133
124
|
this.determineScrollStatus();
|
|
@@ -191,6 +182,20 @@ export class SwirlModal {
|
|
|
191
182
|
disableBodyScroll(this.scrollContainer);
|
|
192
183
|
disableBodyScroll(this.sidebarScrollContainer);
|
|
193
184
|
}
|
|
185
|
+
setupFocusTrap() {
|
|
186
|
+
this.focusTrap = focusTrap.createFocusTrap(this.modalEl, {
|
|
187
|
+
allowOutsideClick: true,
|
|
188
|
+
setReturnFocus: getActiveElement(),
|
|
189
|
+
// We don't always close the modal when ESC is pressed. So we manage the
|
|
190
|
+
// deactivation of the focus trap manually.
|
|
191
|
+
escapeDeactivates: false,
|
|
192
|
+
tabbableOptions: {
|
|
193
|
+
getShadowRoot: (node) => {
|
|
194
|
+
return node.shadowRoot;
|
|
195
|
+
},
|
|
196
|
+
},
|
|
197
|
+
});
|
|
198
|
+
}
|
|
194
199
|
unlockBodyScroll() {
|
|
195
200
|
if (this.scrollContainer) {
|
|
196
201
|
enableBodyScroll(this.scrollContainer);
|
|
@@ -226,29 +231,29 @@ export class SwirlModal {
|
|
|
226
231
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
227
232
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
228
233
|
});
|
|
229
|
-
return (h(Host, { key: '
|
|
234
|
+
return (h(Host, { key: 'c5c1e9d205414a6703f29de9cb94ca31d0b2e53e' }, h("section", { key: '147ee8b41dbb009b0c42cb0cbd47b4e4b2236ede', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: 'c5581d8ad582064afbbeb131c1767de2665c4a0d', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '1cbd4e90ce8aea3452c1256af3869e69711ed470', class: "modal__body", style: !this.isFullscreen
|
|
230
235
|
? {
|
|
231
236
|
"--swirl-modal-max-height": this.maxHeight,
|
|
232
237
|
"--swirl-modal-height": this.height,
|
|
233
238
|
minHeight: this.minHeight,
|
|
234
239
|
maxWidth: this.maxWidth,
|
|
235
240
|
}
|
|
236
|
-
: {} }, h("aside", { key: '
|
|
241
|
+
: {} }, h("aside", { key: 'b5dc4279da991e8db9601e3a03bdb5d7d7519a3b', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '182b2e194d44bb34bc7208329f6c560bdc031a90', class: classnames("modal__sidebar-header", {
|
|
237
242
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
238
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
243
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '3c8297ccb8edb389ccb1ba88e7ffdb2769837d72', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '02950b7a7d448fc7e77fea7d12ca073e367622b8', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '73f7fd8f43bb72470e6eb9fefd32eee81234e7ff', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '5004305bf8fecaf91a50907c07920fc44754362c', name: "sidebar-content" })), h("div", { key: '4f661235c09bb4b730d31a8159f44a3357adcaff', class: "modal__sidebar-footer" }, h("slot", { key: '4a566e09e71f6acb2c8431cec8985a4bb6185395', name: "sidebar-footer" }))), h("div", { key: '5e95bda60c880712cb063ae6ed67ea8964aabbe3', class: "modal__main-content" }, h("header", { key: '7b3f4be5bb206c96c517ad6dea314d35dda19fbb', class: "modal__custom-header" }, h("slot", { key: '802cb431d703e2dc5a6854716e00267518655cae', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '05f41ca8a6f6c668e412bbd8b1a0f7c25f4a3ae5', class: "modal__header" }, h("div", { key: '5946fb4497f1be9d5d542ef721c419a7e988f10b', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd631408b4ac4b107525d60649d7118144085f2c9', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
239
244
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
240
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
245
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'efdbb168513ba5faded2a3e68792f29eea3a73cc', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
241
246
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
242
247
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
243
248
|
? this.fullscreenDisableButtonLabel
|
|
244
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
249
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'd9d93c08677a3c0a456b5d4c7a9d7fdcc44a6148', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'a9056a4b722d0a3891e5e902613e7054d557729c', class: "modal__content-container", style: {
|
|
245
250
|
gap: this.contentGap
|
|
246
251
|
? `var(--s-space-${this.contentGap})`
|
|
247
252
|
: undefined,
|
|
248
|
-
} }, h("div", { key: '
|
|
253
|
+
} }, h("div", { key: 'c1367de68040ff0b637efa7a7eb66b361320fca6', class: "modal__primary-content", style: {
|
|
249
254
|
maxWidth: this.primaryContentMaxWidth,
|
|
250
255
|
flex: this.primaryContentFlex,
|
|
251
|
-
} }, h("div", { key: '
|
|
256
|
+
} }, h("div", { key: '9c729f9350a144e8b7af8e07c1f0d69cd320c4a6', class: "modal__header-tools" }, h("slot", { key: '488d261460a865fd207acd9031ad3bf8e53e9899', name: "header-tools" })), h("div", { key: 'c960da07fa2190d4af907d05801f61ecaf4dae4e', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'ff5be4e790eacffbce4ae3d67d43a1ba75f6a760' }))), h("div", { key: '89d368198cdc7156ca143ab9fcdbf9bf56cd7772', class: "modal__secondary-content", style: {
|
|
252
257
|
maxWidth: this.secondaryContentMaxWidth,
|
|
253
258
|
flex: this.secondaryContentFlex,
|
|
254
259
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -266,7 +271,7 @@ export class SwirlModal {
|
|
|
266
271
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
267
272
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
268
273
|
: undefined,
|
|
269
|
-
} }, h("slot", { key: '
|
|
274
|
+
} }, h("slot", { key: 'a4fc64dfed01d834f883ce21499178c60d5e8502', name: "secondary-content" }))), h("div", { key: '53044266cf7b39f383e28de0b33ff5d095bcb3bb', class: "modal__custom-footer" }, h("slot", { key: '25681e2fd02c846a8b9cdcfa951799730ef06f5b', name: "custom-footer" })), showControls && (h("footer", { key: 'a65853a33d5b554b18bcc141611d2470f22e6aad', class: "modal__controls" }, h("swirl-button-group", { key: '114cb44c508028261d83d958d3d7030c4f7d4771', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '7a6ef1b9e54a746ebba3d94ae11e56151c8bfa54', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '3e4a90e77da254714a95ee1e4f6c83193b17f6dc', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
270
275
|
}
|
|
271
276
|
static get is() { return "swirl-modal"; }
|
|
272
277
|
static get originalStyleUrls() {
|