@getflip/swirl-components 0.444.0 → 0.445.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 +41 -9
- package/dist/cjs/swirl-dialog.cjs.entry.js +12 -8
- package/dist/cjs/swirl-modal.cjs.entry.js +19 -15
- package/dist/collection/components/swirl-dialog/swirl-dialog.js +22 -10
- package/dist/collection/components/swirl-modal/swirl-modal.js +29 -17
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-dialog.js +12 -8
- package/dist/components/swirl-modal.js +19 -15
- package/dist/esm/swirl-dialog.entry.js +12 -8
- package/dist/esm/swirl-modal.entry.js +19 -15
- package/dist/swirl-components/{p-4e496744.entry.js → p-5336fc61.entry.js} +1 -1
- package/dist/swirl-components/{p-f6e7c45b.entry.js → p-b321139a.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-dialog/swirl-dialog.d.ts +2 -1
- package/dist/types/components/swirl-modal/swirl-modal.d.ts +3 -2
- package/dist/types/components.d.ts +2 -2
- package/package.json +1 -1
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-02-
|
|
2
|
+
"timestamp": "2026-02-18T13:28:45",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.35.0",
|
|
@@ -12205,18 +12205,34 @@
|
|
|
12205
12205
|
"docs": ""
|
|
12206
12206
|
},
|
|
12207
12207
|
"complexType": {
|
|
12208
|
-
"signature": "() => Promise<void>",
|
|
12209
|
-
"parameters": [
|
|
12208
|
+
"signature": "(returnFocusTo?: HTMLElement | string) => Promise<void>",
|
|
12209
|
+
"parameters": [
|
|
12210
|
+
{
|
|
12211
|
+
"name": "returnFocusTo",
|
|
12212
|
+
"type": "string | HTMLElement",
|
|
12213
|
+
"docs": ""
|
|
12214
|
+
}
|
|
12215
|
+
],
|
|
12210
12216
|
"references": {
|
|
12211
12217
|
"Promise": {
|
|
12212
12218
|
"location": "global",
|
|
12213
12219
|
"id": "global::Promise"
|
|
12220
|
+
},
|
|
12221
|
+
"HTMLElement": {
|
|
12222
|
+
"location": "global",
|
|
12223
|
+
"id": "global::HTMLElement"
|
|
12214
12224
|
}
|
|
12215
12225
|
},
|
|
12216
12226
|
"return": "Promise<void>"
|
|
12217
12227
|
},
|
|
12218
|
-
"signature": "open() => Promise<void>",
|
|
12219
|
-
"parameters": [
|
|
12228
|
+
"signature": "open(returnFocusTo?: HTMLElement | string) => Promise<void>",
|
|
12229
|
+
"parameters": [
|
|
12230
|
+
{
|
|
12231
|
+
"name": "returnFocusTo",
|
|
12232
|
+
"type": "string | HTMLElement",
|
|
12233
|
+
"docs": ""
|
|
12234
|
+
}
|
|
12235
|
+
],
|
|
12220
12236
|
"docs": "Open the dialog.",
|
|
12221
12237
|
"docsTags": []
|
|
12222
12238
|
}
|
|
@@ -56659,18 +56675,34 @@
|
|
|
56659
56675
|
"docs": ""
|
|
56660
56676
|
},
|
|
56661
56677
|
"complexType": {
|
|
56662
|
-
"signature": "() => Promise<void>",
|
|
56663
|
-
"parameters": [
|
|
56678
|
+
"signature": "(returnFocusTo?: HTMLElement | string) => Promise<void>",
|
|
56679
|
+
"parameters": [
|
|
56680
|
+
{
|
|
56681
|
+
"name": "returnFocusTo",
|
|
56682
|
+
"type": "string | HTMLElement",
|
|
56683
|
+
"docs": ""
|
|
56684
|
+
}
|
|
56685
|
+
],
|
|
56664
56686
|
"references": {
|
|
56665
56687
|
"Promise": {
|
|
56666
56688
|
"location": "global",
|
|
56667
56689
|
"id": "global::Promise"
|
|
56690
|
+
},
|
|
56691
|
+
"HTMLElement": {
|
|
56692
|
+
"location": "global",
|
|
56693
|
+
"id": "global::HTMLElement"
|
|
56668
56694
|
}
|
|
56669
56695
|
},
|
|
56670
56696
|
"return": "Promise<void>"
|
|
56671
56697
|
},
|
|
56672
|
-
"signature": "open() => Promise<void>",
|
|
56673
|
-
"parameters": [
|
|
56698
|
+
"signature": "open(returnFocusTo?: HTMLElement | string) => Promise<void>",
|
|
56699
|
+
"parameters": [
|
|
56700
|
+
{
|
|
56701
|
+
"name": "returnFocusTo",
|
|
56702
|
+
"type": "string | HTMLElement",
|
|
56703
|
+
"docs": ""
|
|
56704
|
+
}
|
|
56705
|
+
],
|
|
56674
56706
|
"docs": "Open the modal.",
|
|
56675
56707
|
"docsTags": []
|
|
56676
56708
|
},
|
|
@@ -66,8 +66,9 @@ const SwirlDialog = class {
|
|
|
66
66
|
/**
|
|
67
67
|
* Open the dialog.
|
|
68
68
|
*/
|
|
69
|
-
async open() {
|
|
69
|
+
async open(returnFocusTo) {
|
|
70
70
|
this.opening = true;
|
|
71
|
+
this.temporaryReturnFocusTo = returnFocusTo;
|
|
71
72
|
if (!this.dialogEl) {
|
|
72
73
|
return;
|
|
73
74
|
}
|
|
@@ -84,15 +85,17 @@ const SwirlDialog = class {
|
|
|
84
85
|
this.closing = true;
|
|
85
86
|
setTimeout(() => {
|
|
86
87
|
this.dialogEl.close();
|
|
87
|
-
|
|
88
|
-
this.customFocusReturn();
|
|
89
|
-
}
|
|
88
|
+
this.customFocusReturn();
|
|
90
89
|
}, 150);
|
|
91
90
|
}
|
|
92
91
|
customFocusReturn() {
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
|
|
92
|
+
const customReturnFocusTo = this.temporaryReturnFocusTo ?? this.returnFocusTo;
|
|
93
|
+
if (!customReturnFocusTo) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const element = typeof customReturnFocusTo === "string"
|
|
97
|
+
? document.querySelector(customReturnFocusTo)
|
|
98
|
+
: customReturnFocusTo;
|
|
96
99
|
const focusableElements = index_esm.tabbable(element, {
|
|
97
100
|
includeContainer: true,
|
|
98
101
|
getShadowRoot: true,
|
|
@@ -100,11 +103,12 @@ const SwirlDialog = class {
|
|
|
100
103
|
if (focusableElements.length > 0) {
|
|
101
104
|
focusableElements[0].focus();
|
|
102
105
|
}
|
|
106
|
+
this.temporaryReturnFocusTo = undefined;
|
|
103
107
|
}
|
|
104
108
|
render() {
|
|
105
109
|
const className = index$1.classnames("dialog", { "dialog--closing": this.closing });
|
|
106
110
|
const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
|
|
107
|
-
return (index.h(index.Host, { key: '
|
|
111
|
+
return (index.h(index.Host, { key: '877320d3ccc13ee8c4cef6fabd6db827645337ff' }, index.h("dialog", { key: 'db36f0e390d1e1593dff372cce290e53a9574fd9', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, index.h("div", { key: 'be03c2bb83506aeb3df08335a25795033e6ddd7a', class: "dialog__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'da39ef70b86e76cd0d48ca83a3e92b4b957067b3', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (index.h("h2", { key: '5705ab0984f1cbdc0b7740648f1c78a270212f7d', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), index.h("div", { key: '8b5278de16d40a25eb0427ba0d1af851b4a2f075', class: "dialog__content", part: "dialog__content", id: "content" }, index.h("slot", { key: '932e8cfc88ffcc6c2d154d25e824d6416db875ed' })), index.h("div", { key: 'c4e98c3e727108344e51db4a6d4ea6d3bcc901c8', class: "dialog__controls" }, hasLeftControls && (index.h("div", { key: 'c1a106b74a2caa5d4e590b40d91a6869bf8774e3', class: "dialog__left_controls" }, index.h("slot", { key: '298cf1ba398a58df9b310358388d3646e4601f41', name: "left-controls" }))), this.secondaryActionLabel && (index.h("swirl-button", { key: 'b40eb78e6f186610ee58c277a684c69fd952889b', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'df4422f6a81d33cf7abb3f304558181a27f8aa2a', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
|
|
108
112
|
}
|
|
109
113
|
get el() { return index.getElement(this); }
|
|
110
114
|
};
|
|
@@ -133,8 +133,9 @@ const SwirlModal = class {
|
|
|
133
133
|
/**
|
|
134
134
|
* Open the modal.
|
|
135
135
|
*/
|
|
136
|
-
async open() {
|
|
136
|
+
async open(returnFocusTo) {
|
|
137
137
|
this.opening = true;
|
|
138
|
+
this.temporaryReturnFocusTo = returnFocusTo;
|
|
138
139
|
if (!this.modalEl) {
|
|
139
140
|
return;
|
|
140
141
|
}
|
|
@@ -169,9 +170,7 @@ const SwirlModal = class {
|
|
|
169
170
|
setTimeout(() => {
|
|
170
171
|
this.mutationObserver?.disconnect();
|
|
171
172
|
this.modalEl.close();
|
|
172
|
-
|
|
173
|
-
this.customFocusReturn();
|
|
174
|
-
}
|
|
173
|
+
this.customFocusReturn();
|
|
175
174
|
}, 150);
|
|
176
175
|
}
|
|
177
176
|
async setFullscreen(isFullscreen) {
|
|
@@ -239,9 +238,13 @@ const SwirlModal = class {
|
|
|
239
238
|
this.modalEl.setAttribute("closedby", "none");
|
|
240
239
|
}
|
|
241
240
|
customFocusReturn() {
|
|
242
|
-
const
|
|
243
|
-
|
|
244
|
-
|
|
241
|
+
const customReturnFocusTo = this.temporaryReturnFocusTo ?? this.returnFocusTo;
|
|
242
|
+
if (!customReturnFocusTo) {
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
const element = typeof customReturnFocusTo === "string"
|
|
246
|
+
? document.querySelector(customReturnFocusTo)
|
|
247
|
+
: customReturnFocusTo;
|
|
245
248
|
const focusableElements = index_esm.tabbable(element, {
|
|
246
249
|
includeContainer: true,
|
|
247
250
|
getShadowRoot: true,
|
|
@@ -249,6 +252,7 @@ const SwirlModal = class {
|
|
|
249
252
|
if (focusableElements.length > 0) {
|
|
250
253
|
focusableElements[0].focus();
|
|
251
254
|
}
|
|
255
|
+
this.temporaryReturnFocusTo = undefined;
|
|
252
256
|
}
|
|
253
257
|
render() {
|
|
254
258
|
const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
|
|
@@ -277,29 +281,29 @@ const SwirlModal = class {
|
|
|
277
281
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
278
282
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
279
283
|
});
|
|
280
|
-
return (index.h(index.Host, { key: '
|
|
284
|
+
return (index.h(index.Host, { key: '9607d76894163f9cea92112aa01bfc6e22a605ed' }, index.h("dialog", { key: '493f4a8502ac1bd48885f0be516bae1924bf2811', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '8336b77b80c345349280e458eacd0ad27a82dd2e', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'ddea931cf61e89694478dc990a79fd7547786447', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
281
285
|
? {
|
|
282
286
|
"--swirl-modal-max-height": this.maxHeight,
|
|
283
287
|
"--swirl-modal-height": this.height,
|
|
284
288
|
minHeight: this.minHeight,
|
|
285
289
|
maxWidth: this.maxWidth,
|
|
286
290
|
}
|
|
287
|
-
: {} }, index.h("aside", { key: '
|
|
291
|
+
: {} }, index.h("aside", { key: '7e68933ae1f88a30ac4391d8840f5de4f013f2b5', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '937372760da5f51336f94501b8c85b0b09ecaba5', class: index$1.classnames("modal__sidebar-header", {
|
|
288
292
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
289
|
-
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '
|
|
293
|
+
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: 'c40db31ae401fcde5e68c59a91cc80a507201edb', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '470f47fbe55f98b48b5f364b0461d1c973c1b131', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '4f09f2abcec1a34a6caa57788ced9cfecdfcf28e', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '4884f0e09c450b961636631b07c39627c58024fc', name: "sidebar-content" })), index.h("div", { key: '3a6568ff8eee6b3633c9fab8a51531619b0740ff', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '87fc8362aa752cad6a8dfcb7f3dcb73dde97c4f5', name: "sidebar-footer" }))), index.h("div", { key: '7083bdd06f61cac7d98b6f9ace6ece3d3e584ba4', class: "modal__main-content" }, index.h("header", { key: 'b0b07efe07d43dc60267ff98f2967f87ca4d4fd8', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '55f676f976dea97d8007d5f5877ca6dc9919f167', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '00b190cde34d936f78338c7855459623f99a0baf', class: "modal__header" }, index.h("div", { key: '7feda4612420ed6643b8bfd83b0562d22995dcdd', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'f044e9d305151fb188be9a4639a0f40be1f59062', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
290
294
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
291
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '
|
|
295
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'a0f5f7dbda18e36ef6a006bbf901f6f58f2a7ee9', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
292
296
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
293
297
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
294
298
|
? this.fullscreenDisableButtonLabel
|
|
295
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '
|
|
299
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '0b4ce16103c4ebadf58b823168a80c727493a991', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'a5ff003a51bb82b58e299090e14e5061af014206', class: "modal__content-container", style: {
|
|
296
300
|
gap: this.contentGap
|
|
297
301
|
? `var(--s-space-${this.contentGap})`
|
|
298
302
|
: undefined,
|
|
299
|
-
} }, index.h("div", { key: '
|
|
303
|
+
} }, index.h("div", { key: '7998558a65f2f550d6a904f92879d8cba407afcf', class: "modal__primary-content", style: {
|
|
300
304
|
maxWidth: this.primaryContentMaxWidth,
|
|
301
305
|
flex: this.primaryContentFlex,
|
|
302
|
-
} }, index.h("div", { key: '
|
|
306
|
+
} }, index.h("div", { key: 'f6f396758cb0c9339f100e00f282408e927bc9d6', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '2f85693e7244246afe09ea082c9128cfae96afee', name: "header-tools" })), index.h("div", { key: '311c59649ff26753ba0e361be1eb79b43d57e3d0', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: 'a7594eac7292ce9392143d72560829d1e5af9294' }))), index.h("div", { key: 'a2ffc74c4b81dd0d08060d248c5caa4a4df3b355', class: "modal__secondary-content", style: {
|
|
303
307
|
maxWidth: this.secondaryContentMaxWidth,
|
|
304
308
|
flex: this.secondaryContentFlex,
|
|
305
309
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -317,7 +321,7 @@ const SwirlModal = class {
|
|
|
317
321
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
318
322
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
319
323
|
: undefined,
|
|
320
|
-
} }, index.h("slot", { key: '
|
|
324
|
+
} }, index.h("slot", { key: '37c3f309468170109de45aebfbe1c2e7a70929bc', name: "secondary-content" }))), index.h("div", { key: '235c9a2e6eed9359f8018b18473855a2e6569b16', class: "modal__custom-footer" }, index.h("slot", { key: '81d43e3d64e9793a8cbb594f22249411c143edb5', name: "custom-footer" })), showControls && (index.h("footer", { key: '039c1db115c9b719240d9f6b6b775e3be2ab1e9f', class: "modal__controls" }, index.h("swirl-button-group", { key: '31020e04e3a0329448bbcb787160980bb4cc5d96', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: 'dd2da3b453d272f21d07cff0bb3bc4b612269bf2', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '9407812f0e5cf0d997d875df326606ed9c735c74', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
321
325
|
}
|
|
322
326
|
get el() { return index.getElement(this); }
|
|
323
327
|
};
|
|
@@ -59,8 +59,9 @@ export class SwirlDialog {
|
|
|
59
59
|
/**
|
|
60
60
|
* Open the dialog.
|
|
61
61
|
*/
|
|
62
|
-
async open() {
|
|
62
|
+
async open(returnFocusTo) {
|
|
63
63
|
this.opening = true;
|
|
64
|
+
this.temporaryReturnFocusTo = returnFocusTo;
|
|
64
65
|
if (!this.dialogEl) {
|
|
65
66
|
return;
|
|
66
67
|
}
|
|
@@ -77,15 +78,17 @@ export class SwirlDialog {
|
|
|
77
78
|
this.closing = true;
|
|
78
79
|
setTimeout(() => {
|
|
79
80
|
this.dialogEl.close();
|
|
80
|
-
|
|
81
|
-
this.customFocusReturn();
|
|
82
|
-
}
|
|
81
|
+
this.customFocusReturn();
|
|
83
82
|
}, 150);
|
|
84
83
|
}
|
|
85
84
|
customFocusReturn() {
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
const customReturnFocusTo = this.temporaryReturnFocusTo ?? this.returnFocusTo;
|
|
86
|
+
if (!customReturnFocusTo) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
const element = typeof customReturnFocusTo === "string"
|
|
90
|
+
? document.querySelector(customReturnFocusTo)
|
|
91
|
+
: customReturnFocusTo;
|
|
89
92
|
const focusableElements = tabbable(element, {
|
|
90
93
|
includeContainer: true,
|
|
91
94
|
getShadowRoot: true,
|
|
@@ -93,11 +96,12 @@ export class SwirlDialog {
|
|
|
93
96
|
if (focusableElements.length > 0) {
|
|
94
97
|
focusableElements[0].focus();
|
|
95
98
|
}
|
|
99
|
+
this.temporaryReturnFocusTo = undefined;
|
|
96
100
|
}
|
|
97
101
|
render() {
|
|
98
102
|
const className = classnames("dialog", { "dialog--closing": this.closing });
|
|
99
103
|
const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
|
|
100
|
-
return (h(Host, { key: '
|
|
104
|
+
return (h(Host, { key: '877320d3ccc13ee8c4cef6fabd6db827645337ff' }, h("dialog", { key: 'db36f0e390d1e1593dff372cce290e53a9574fd9', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, h("div", { key: 'be03c2bb83506aeb3df08335a25795033e6ddd7a', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'da39ef70b86e76cd0d48ca83a3e92b4b957067b3', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '5705ab0984f1cbdc0b7740648f1c78a270212f7d', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '8b5278de16d40a25eb0427ba0d1af851b4a2f075', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '932e8cfc88ffcc6c2d154d25e824d6416db875ed' })), h("div", { key: 'c4e98c3e727108344e51db4a6d4ea6d3bcc901c8', class: "dialog__controls" }, hasLeftControls && (h("div", { key: 'c1a106b74a2caa5d4e590b40d91a6869bf8774e3', class: "dialog__left_controls" }, h("slot", { key: '298cf1ba398a58df9b310358388d3646e4601f41', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: 'b40eb78e6f186610ee58c277a684c69fd952889b', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'df4422f6a81d33cf7abb3f304558181a27f8aa2a', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
|
|
101
105
|
}
|
|
102
106
|
static get is() { return "swirl-dialog"; }
|
|
103
107
|
static get encapsulation() { return "shadow"; }
|
|
@@ -345,12 +349,20 @@ export class SwirlDialog {
|
|
|
345
349
|
return {
|
|
346
350
|
"open": {
|
|
347
351
|
"complexType": {
|
|
348
|
-
"signature": "() => Promise<void>",
|
|
349
|
-
"parameters": [
|
|
352
|
+
"signature": "(returnFocusTo?: HTMLElement | string) => Promise<void>",
|
|
353
|
+
"parameters": [{
|
|
354
|
+
"name": "returnFocusTo",
|
|
355
|
+
"type": "string | HTMLElement",
|
|
356
|
+
"docs": ""
|
|
357
|
+
}],
|
|
350
358
|
"references": {
|
|
351
359
|
"Promise": {
|
|
352
360
|
"location": "global",
|
|
353
361
|
"id": "global::Promise"
|
|
362
|
+
},
|
|
363
|
+
"HTMLElement": {
|
|
364
|
+
"location": "global",
|
|
365
|
+
"id": "global::HTMLElement"
|
|
354
366
|
}
|
|
355
367
|
},
|
|
356
368
|
"return": "Promise<void>"
|
|
@@ -128,8 +128,9 @@ export class SwirlModal {
|
|
|
128
128
|
/**
|
|
129
129
|
* Open the modal.
|
|
130
130
|
*/
|
|
131
|
-
async open() {
|
|
131
|
+
async open(returnFocusTo) {
|
|
132
132
|
this.opening = true;
|
|
133
|
+
this.temporaryReturnFocusTo = returnFocusTo;
|
|
133
134
|
if (!this.modalEl) {
|
|
134
135
|
return;
|
|
135
136
|
}
|
|
@@ -164,9 +165,7 @@ export class SwirlModal {
|
|
|
164
165
|
setTimeout(() => {
|
|
165
166
|
this.mutationObserver?.disconnect();
|
|
166
167
|
this.modalEl.close();
|
|
167
|
-
|
|
168
|
-
this.customFocusReturn();
|
|
169
|
-
}
|
|
168
|
+
this.customFocusReturn();
|
|
170
169
|
}, 150);
|
|
171
170
|
}
|
|
172
171
|
async setFullscreen(isFullscreen) {
|
|
@@ -234,9 +233,13 @@ export class SwirlModal {
|
|
|
234
233
|
this.modalEl.setAttribute("closedby", "none");
|
|
235
234
|
}
|
|
236
235
|
customFocusReturn() {
|
|
237
|
-
const
|
|
238
|
-
|
|
239
|
-
|
|
236
|
+
const customReturnFocusTo = this.temporaryReturnFocusTo ?? this.returnFocusTo;
|
|
237
|
+
if (!customReturnFocusTo) {
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
const element = typeof customReturnFocusTo === "string"
|
|
241
|
+
? document.querySelector(customReturnFocusTo)
|
|
242
|
+
: customReturnFocusTo;
|
|
240
243
|
const focusableElements = tabbable(element, {
|
|
241
244
|
includeContainer: true,
|
|
242
245
|
getShadowRoot: true,
|
|
@@ -244,6 +247,7 @@ export class SwirlModal {
|
|
|
244
247
|
if (focusableElements.length > 0) {
|
|
245
248
|
focusableElements[0].focus();
|
|
246
249
|
}
|
|
250
|
+
this.temporaryReturnFocusTo = undefined;
|
|
247
251
|
}
|
|
248
252
|
render() {
|
|
249
253
|
const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
|
|
@@ -272,29 +276,29 @@ export class SwirlModal {
|
|
|
272
276
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
273
277
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
274
278
|
});
|
|
275
|
-
return (h(Host, { key: '
|
|
279
|
+
return (h(Host, { key: '9607d76894163f9cea92112aa01bfc6e22a605ed' }, h("dialog", { key: '493f4a8502ac1bd48885f0be516bae1924bf2811', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '8336b77b80c345349280e458eacd0ad27a82dd2e', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'ddea931cf61e89694478dc990a79fd7547786447', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
276
280
|
? {
|
|
277
281
|
"--swirl-modal-max-height": this.maxHeight,
|
|
278
282
|
"--swirl-modal-height": this.height,
|
|
279
283
|
minHeight: this.minHeight,
|
|
280
284
|
maxWidth: this.maxWidth,
|
|
281
285
|
}
|
|
282
|
-
: {} }, h("aside", { key: '
|
|
286
|
+
: {} }, h("aside", { key: '7e68933ae1f88a30ac4391d8840f5de4f013f2b5', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '937372760da5f51336f94501b8c85b0b09ecaba5', class: classnames("modal__sidebar-header", {
|
|
283
287
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
284
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
288
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'c40db31ae401fcde5e68c59a91cc80a507201edb', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '470f47fbe55f98b48b5f364b0461d1c973c1b131', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '4f09f2abcec1a34a6caa57788ced9cfecdfcf28e', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '4884f0e09c450b961636631b07c39627c58024fc', name: "sidebar-content" })), h("div", { key: '3a6568ff8eee6b3633c9fab8a51531619b0740ff', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '87fc8362aa752cad6a8dfcb7f3dcb73dde97c4f5', name: "sidebar-footer" }))), h("div", { key: '7083bdd06f61cac7d98b6f9ace6ece3d3e584ba4', class: "modal__main-content" }, h("header", { key: 'b0b07efe07d43dc60267ff98f2967f87ca4d4fd8', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '55f676f976dea97d8007d5f5877ca6dc9919f167', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '00b190cde34d936f78338c7855459623f99a0baf', class: "modal__header" }, h("div", { key: '7feda4612420ed6643b8bfd83b0562d22995dcdd', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'f044e9d305151fb188be9a4639a0f40be1f59062', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
285
289
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
286
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
290
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'a0f5f7dbda18e36ef6a006bbf901f6f58f2a7ee9', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
287
291
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
288
292
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
289
293
|
? this.fullscreenDisableButtonLabel
|
|
290
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
294
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '0b4ce16103c4ebadf58b823168a80c727493a991', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'a5ff003a51bb82b58e299090e14e5061af014206', class: "modal__content-container", style: {
|
|
291
295
|
gap: this.contentGap
|
|
292
296
|
? `var(--s-space-${this.contentGap})`
|
|
293
297
|
: undefined,
|
|
294
|
-
} }, h("div", { key: '
|
|
298
|
+
} }, h("div", { key: '7998558a65f2f550d6a904f92879d8cba407afcf', class: "modal__primary-content", style: {
|
|
295
299
|
maxWidth: this.primaryContentMaxWidth,
|
|
296
300
|
flex: this.primaryContentFlex,
|
|
297
|
-
} }, h("div", { key: '
|
|
301
|
+
} }, h("div", { key: 'f6f396758cb0c9339f100e00f282408e927bc9d6', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '2f85693e7244246afe09ea082c9128cfae96afee', name: "header-tools" })), h("div", { key: '311c59649ff26753ba0e361be1eb79b43d57e3d0', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'a7594eac7292ce9392143d72560829d1e5af9294' }))), h("div", { key: 'a2ffc74c4b81dd0d08060d248c5caa4a4df3b355', class: "modal__secondary-content", style: {
|
|
298
302
|
maxWidth: this.secondaryContentMaxWidth,
|
|
299
303
|
flex: this.secondaryContentFlex,
|
|
300
304
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -312,7 +316,7 @@ export class SwirlModal {
|
|
|
312
316
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
313
317
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
314
318
|
: undefined,
|
|
315
|
-
} }, h("slot", { key: '
|
|
319
|
+
} }, h("slot", { key: '37c3f309468170109de45aebfbe1c2e7a70929bc', name: "secondary-content" }))), h("div", { key: '235c9a2e6eed9359f8018b18473855a2e6569b16', class: "modal__custom-footer" }, h("slot", { key: '81d43e3d64e9793a8cbb594f22249411c143edb5', name: "custom-footer" })), showControls && (h("footer", { key: '039c1db115c9b719240d9f6b6b775e3be2ab1e9f', class: "modal__controls" }, h("swirl-button-group", { key: '31020e04e3a0329448bbcb787160980bb4cc5d96', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'dd2da3b453d272f21d07cff0bb3bc4b612269bf2', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '9407812f0e5cf0d997d875df326606ed9c735c74', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
316
320
|
}
|
|
317
321
|
static get is() { return "swirl-modal"; }
|
|
318
322
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1233,12 +1237,20 @@ export class SwirlModal {
|
|
|
1233
1237
|
return {
|
|
1234
1238
|
"open": {
|
|
1235
1239
|
"complexType": {
|
|
1236
|
-
"signature": "() => Promise<void>",
|
|
1237
|
-
"parameters": [
|
|
1240
|
+
"signature": "(returnFocusTo?: HTMLElement | string) => Promise<void>",
|
|
1241
|
+
"parameters": [{
|
|
1242
|
+
"name": "returnFocusTo",
|
|
1243
|
+
"type": "string | HTMLElement",
|
|
1244
|
+
"docs": ""
|
|
1245
|
+
}],
|
|
1238
1246
|
"references": {
|
|
1239
1247
|
"Promise": {
|
|
1240
1248
|
"location": "global",
|
|
1241
1249
|
"id": "global::Promise"
|
|
1250
|
+
},
|
|
1251
|
+
"HTMLElement": {
|
|
1252
|
+
"location": "global",
|
|
1253
|
+
"id": "global::HTMLElement"
|
|
1242
1254
|
}
|
|
1243
1255
|
},
|
|
1244
1256
|
"return": "Promise<void>"
|