@getflip/swirl-components 0.441.0 → 0.443.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 +63 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-dialog.cjs.entry.js +17 -1
- package/dist/cjs/swirl-modal.cjs.entry.js +23 -8
- package/dist/collection/components/swirl-dialog/swirl-dialog.js +41 -1
- package/dist/collection/components/swirl-dialog/swirl-dialog.stories.js +6 -0
- package/dist/collection/components/swirl-modal/swirl-modal.js +47 -8
- package/dist/collection/components/swirl-modal/swirl-modal.stories.js +6 -0
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-dialog.js +18 -1
- package/dist/components/swirl-modal.js +24 -8
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-dialog.entry.js +17 -1
- package/dist/esm/swirl-modal.entry.js +23 -8
- package/dist/swirl-components/p-4e496744.entry.js +1 -0
- package/dist/swirl-components/p-f6e7c45b.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-dialog/swirl-dialog.d.ts +2 -0
- package/dist/types/components/swirl-dialog/swirl-dialog.stories.d.ts +6 -0
- package/dist/types/components/swirl-modal/swirl-modal.d.ts +2 -0
- package/dist/types/components/swirl-modal/swirl-modal.stories.d.ts +6 -0
- package/dist/types/components.d.ts +4 -0
- package/package.json +1 -1
- package/vscode-data.json +8 -0
- package/dist/swirl-components/p-4bd7d553.entry.js +0 -1
- package/dist/swirl-components/p-73baa905.entry.js +0 -1
|
@@ -169,6 +169,9 @@ const SwirlModal = class {
|
|
|
169
169
|
setTimeout(() => {
|
|
170
170
|
this.mutationObserver?.disconnect();
|
|
171
171
|
this.modalEl.close();
|
|
172
|
+
if (this.returnFocusTo) {
|
|
173
|
+
this.customFocusReturn();
|
|
174
|
+
}
|
|
172
175
|
}, 150);
|
|
173
176
|
}
|
|
174
177
|
async setFullscreen(isFullscreen) {
|
|
@@ -235,6 +238,18 @@ const SwirlModal = class {
|
|
|
235
238
|
setDialogCustomProps() {
|
|
236
239
|
this.modalEl.setAttribute("closedby", "none");
|
|
237
240
|
}
|
|
241
|
+
customFocusReturn() {
|
|
242
|
+
const element = typeof this.returnFocusTo === "string"
|
|
243
|
+
? document.querySelector(this.returnFocusTo)
|
|
244
|
+
: this.returnFocusTo;
|
|
245
|
+
const focusableElements = index_esm.tabbable(element, {
|
|
246
|
+
includeContainer: true,
|
|
247
|
+
getShadowRoot: true,
|
|
248
|
+
});
|
|
249
|
+
if (focusableElements.length > 0) {
|
|
250
|
+
focusableElements[0].focus();
|
|
251
|
+
}
|
|
252
|
+
}
|
|
238
253
|
render() {
|
|
239
254
|
const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
|
|
240
255
|
const className = index$1.classnames("modal", `modal--variant-${this.variant}`, {
|
|
@@ -262,29 +277,29 @@ const SwirlModal = class {
|
|
|
262
277
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
263
278
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
264
279
|
});
|
|
265
|
-
return (index.h(index.Host, { key: '
|
|
280
|
+
return (index.h(index.Host, { key: 'c53283aad7f87ad05cc74bf68d39e33e57665cea' }, index.h("dialog", { key: 'f3e9a0b61a94b0b1d574265536a39d8bbe3aeaa1', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '75bf8d418a4d77ffc37e42fb891047b39f99b6ab', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'f5bcf112f23d9fb77bb2cba66a6203d5b9951a33', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
266
281
|
? {
|
|
267
282
|
"--swirl-modal-max-height": this.maxHeight,
|
|
268
283
|
"--swirl-modal-height": this.height,
|
|
269
284
|
minHeight: this.minHeight,
|
|
270
285
|
maxWidth: this.maxWidth,
|
|
271
286
|
}
|
|
272
|
-
: {} }, index.h("aside", { key: '
|
|
287
|
+
: {} }, index.h("aside", { key: '382e8b1e9592b3a9752bb1ef2fc0f1b556cd2d7c', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '41cf73ab5aaca279a88eb6532f2144242f78ea47', class: index$1.classnames("modal__sidebar-header", {
|
|
273
288
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
274
|
-
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '
|
|
289
|
+
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '9ead40c49960b2d69feca469bbc91ea91b4ab3d1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '487f65c82081100e09be212f2e400900ac6c8bfc', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '147a03cbb62653955ad302b782774812cc9f9068', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: 'ecde4d85fc8ab0ae0b9e0559ba8a779ab41a5d3a', name: "sidebar-content" })), index.h("div", { key: '5c0aeac2179557eea8953cc8809fa3cdeec58f7a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '0149eae26b53fdc7727e8fe355d39ef1aa6d2313', name: "sidebar-footer" }))), index.h("div", { key: '9c5b37271a1e158f8a45fe79705034a48fb565ed', class: "modal__main-content" }, index.h("header", { key: '9ac62c6974e74c144c3c8ca80b530d73912b0137', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '55c475bfa35b12376efac0b67f26a0c3b31a20af', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '54b61a7b591f367d8a3c916021e7159e0eeed068', class: "modal__header" }, index.h("div", { key: '159e1b20bd85579ed7fdfe1e1459edca776bf6b6', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '473b559c8b3629a1071ca687a0f1ee52dc7d15d3', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
275
290
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
276
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '
|
|
291
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'fd40a806fceca676a41b2253f82e18e960da806f', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
277
292
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
278
293
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
279
294
|
? this.fullscreenDisableButtonLabel
|
|
280
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '
|
|
295
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '3d54e1b6df57be9faafc96e0aba51e1f7cc5493f', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '460cff9a5b1d6c5775a39534678af201909b3388', class: "modal__content-container", style: {
|
|
281
296
|
gap: this.contentGap
|
|
282
297
|
? `var(--s-space-${this.contentGap})`
|
|
283
298
|
: undefined,
|
|
284
|
-
} }, index.h("div", { key: '
|
|
299
|
+
} }, index.h("div", { key: '2c314687bf9553212f41be41d7ba40092cf4adbf', class: "modal__primary-content", style: {
|
|
285
300
|
maxWidth: this.primaryContentMaxWidth,
|
|
286
301
|
flex: this.primaryContentFlex,
|
|
287
|
-
} }, index.h("div", { key: '
|
|
302
|
+
} }, index.h("div", { key: 'd791af57ae248b9ad5e0872bcb193fefd1fef44b', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '8e5b801755e617dbae380c86d9b9a6c72203f915', name: "header-tools" })), index.h("div", { key: '460a2c618a871d1fed8927a676c0cef86607939f', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '91b8d1223e10c107392c4a6913d3483ccbe3c689' }))), index.h("div", { key: '8d7757d3ad4921e649e47e4052dc30c069bbb082', class: "modal__secondary-content", style: {
|
|
288
303
|
maxWidth: this.secondaryContentMaxWidth,
|
|
289
304
|
flex: this.secondaryContentFlex,
|
|
290
305
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -302,7 +317,7 @@ const SwirlModal = class {
|
|
|
302
317
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
303
318
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
304
319
|
: undefined,
|
|
305
|
-
} }, index.h("slot", { key: '
|
|
320
|
+
} }, index.h("slot", { key: '0fee540e1ffcd87a4efd66394b9506073720d4f9', name: "secondary-content" }))), index.h("div", { key: 'e3d7e34eeb3a852801494b01590605736359ff93', class: "modal__custom-footer" }, index.h("slot", { key: 'f9152641cfe89640ded1ca29eecb6672b0c1db5a', name: "custom-footer" })), showControls && (index.h("footer", { key: '794fdc1f5f62174bb7e8dd22ebd2cf66263e78e4', class: "modal__controls" }, index.h("swirl-button-group", { key: 'eb5b75263ab691ea70dca2608ee4e3bae836dbe4', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: 'bd4f677b1b4fc4cd26a2d1bf4bdb3e2f54c43159', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '6228911c5e114668d9a4dce63aff4c3931cfdb8a', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
306
321
|
}
|
|
307
322
|
get el() { return index.getElement(this); }
|
|
308
323
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
|
+
import { tabbable } from "tabbable";
|
|
3
4
|
/**
|
|
4
5
|
* @slot slot - The dialog content
|
|
5
6
|
* @slot left-controls - Controls displayed on the left side of the default ones
|
|
@@ -76,12 +77,27 @@ export class SwirlDialog {
|
|
|
76
77
|
this.closing = true;
|
|
77
78
|
setTimeout(() => {
|
|
78
79
|
this.dialogEl.close();
|
|
80
|
+
if (this.returnFocusTo) {
|
|
81
|
+
this.customFocusReturn();
|
|
82
|
+
}
|
|
79
83
|
}, 150);
|
|
80
84
|
}
|
|
85
|
+
customFocusReturn() {
|
|
86
|
+
const element = typeof this.returnFocusTo === "string"
|
|
87
|
+
? document.querySelector(this.returnFocusTo)
|
|
88
|
+
: this.returnFocusTo;
|
|
89
|
+
const focusableElements = tabbable(element, {
|
|
90
|
+
includeContainer: true,
|
|
91
|
+
getShadowRoot: true,
|
|
92
|
+
});
|
|
93
|
+
if (focusableElements.length > 0) {
|
|
94
|
+
focusableElements[0].focus();
|
|
95
|
+
}
|
|
96
|
+
}
|
|
81
97
|
render() {
|
|
82
98
|
const className = classnames("dialog", { "dialog--closing": this.closing });
|
|
83
99
|
const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
|
|
84
|
-
return (h(Host, { key: '
|
|
100
|
+
return (h(Host, { key: '96dda6293b1d08c47f87f939eacfb089f21f8e85' }, h("dialog", { key: '792f1f6afd587fae84fc52a62449a794e3f03e33', "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: '2bca81bc4a2e538f7e080a7d77dc648657938659', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f65ff30e4e5b968beb4173e80998a03e1ca39fca', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'e1f6baa4050471e29eec852df3a6e8e71925bd9c', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'd8f4cc8d93de3aad7d45d3699aa49b73ec5efdcb', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '729e24ecc1de0624279a38723a58ccd7e92f119f' })), h("div", { key: '5340b93042e36af091648b0893a4090d124e7f95', class: "dialog__controls" }, hasLeftControls && (h("div", { key: 'd7064763e1a2f3cd7e7b64f9c36cb0ccb72c595e', class: "dialog__left_controls" }, h("slot", { key: '52525262d65555376b3dc911265dc35f7c801cdb', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: '9adbe0bf902960014f25adcd8ab203a3e2e3a773', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '842263d779c24ecd30928d040cdaa4600eab3fc6', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
|
|
85
101
|
}
|
|
86
102
|
static get is() { return "swirl-dialog"; }
|
|
87
103
|
static get encapsulation() { return "shadow"; }
|
|
@@ -180,6 +196,30 @@ export class SwirlDialog {
|
|
|
180
196
|
"setter": false,
|
|
181
197
|
"reflect": false
|
|
182
198
|
},
|
|
199
|
+
"returnFocusTo": {
|
|
200
|
+
"type": "string",
|
|
201
|
+
"attribute": "return-focus-to",
|
|
202
|
+
"mutable": false,
|
|
203
|
+
"complexType": {
|
|
204
|
+
"original": "HTMLElement | string",
|
|
205
|
+
"resolved": "HTMLElement | string",
|
|
206
|
+
"references": {
|
|
207
|
+
"HTMLElement": {
|
|
208
|
+
"location": "global",
|
|
209
|
+
"id": "global::HTMLElement"
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
"required": false,
|
|
214
|
+
"optional": true,
|
|
215
|
+
"docs": {
|
|
216
|
+
"tags": [],
|
|
217
|
+
"text": ""
|
|
218
|
+
},
|
|
219
|
+
"getter": false,
|
|
220
|
+
"setter": false,
|
|
221
|
+
"reflect": false
|
|
222
|
+
},
|
|
183
223
|
"secondaryActionLabel": {
|
|
184
224
|
"type": "string",
|
|
185
225
|
"attribute": "secondary-action-label",
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { generateStoryElement } from "../../utils";
|
|
2
2
|
import Docs from "./swirl-dialog.mdx";
|
|
3
3
|
export default {
|
|
4
|
+
argTypes: {
|
|
5
|
+
returnFocusTo: {
|
|
6
|
+
control: "text",
|
|
7
|
+
description: "Use when dialog trigger element is unmounted before the dialog is closed.",
|
|
8
|
+
},
|
|
9
|
+
},
|
|
4
10
|
component: "swirl-dialog",
|
|
5
11
|
tags: ["autodocs"],
|
|
6
12
|
parameters: {
|
|
@@ -164,6 +164,9 @@ export class SwirlModal {
|
|
|
164
164
|
setTimeout(() => {
|
|
165
165
|
this.mutationObserver?.disconnect();
|
|
166
166
|
this.modalEl.close();
|
|
167
|
+
if (this.returnFocusTo) {
|
|
168
|
+
this.customFocusReturn();
|
|
169
|
+
}
|
|
167
170
|
}, 150);
|
|
168
171
|
}
|
|
169
172
|
async setFullscreen(isFullscreen) {
|
|
@@ -230,6 +233,18 @@ export class SwirlModal {
|
|
|
230
233
|
setDialogCustomProps() {
|
|
231
234
|
this.modalEl.setAttribute("closedby", "none");
|
|
232
235
|
}
|
|
236
|
+
customFocusReturn() {
|
|
237
|
+
const element = typeof this.returnFocusTo === "string"
|
|
238
|
+
? document.querySelector(this.returnFocusTo)
|
|
239
|
+
: this.returnFocusTo;
|
|
240
|
+
const focusableElements = tabbable(element, {
|
|
241
|
+
includeContainer: true,
|
|
242
|
+
getShadowRoot: true,
|
|
243
|
+
});
|
|
244
|
+
if (focusableElements.length > 0) {
|
|
245
|
+
focusableElements[0].focus();
|
|
246
|
+
}
|
|
247
|
+
}
|
|
233
248
|
render() {
|
|
234
249
|
const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
|
|
235
250
|
const className = classnames("modal", `modal--variant-${this.variant}`, {
|
|
@@ -257,29 +272,29 @@ export class SwirlModal {
|
|
|
257
272
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
258
273
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
259
274
|
});
|
|
260
|
-
return (h(Host, { key: '
|
|
275
|
+
return (h(Host, { key: 'c53283aad7f87ad05cc74bf68d39e33e57665cea' }, h("dialog", { key: 'f3e9a0b61a94b0b1d574265536a39d8bbe3aeaa1', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '75bf8d418a4d77ffc37e42fb891047b39f99b6ab', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'f5bcf112f23d9fb77bb2cba66a6203d5b9951a33', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
261
276
|
? {
|
|
262
277
|
"--swirl-modal-max-height": this.maxHeight,
|
|
263
278
|
"--swirl-modal-height": this.height,
|
|
264
279
|
minHeight: this.minHeight,
|
|
265
280
|
maxWidth: this.maxWidth,
|
|
266
281
|
}
|
|
267
|
-
: {} }, h("aside", { key: '
|
|
282
|
+
: {} }, h("aside", { key: '382e8b1e9592b3a9752bb1ef2fc0f1b556cd2d7c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '41cf73ab5aaca279a88eb6532f2144242f78ea47', class: classnames("modal__sidebar-header", {
|
|
268
283
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
269
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
284
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '9ead40c49960b2d69feca469bbc91ea91b4ab3d1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '487f65c82081100e09be212f2e400900ac6c8bfc', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '147a03cbb62653955ad302b782774812cc9f9068', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'ecde4d85fc8ab0ae0b9e0559ba8a779ab41a5d3a', name: "sidebar-content" })), h("div", { key: '5c0aeac2179557eea8953cc8809fa3cdeec58f7a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '0149eae26b53fdc7727e8fe355d39ef1aa6d2313', name: "sidebar-footer" }))), h("div", { key: '9c5b37271a1e158f8a45fe79705034a48fb565ed', class: "modal__main-content" }, h("header", { key: '9ac62c6974e74c144c3c8ca80b530d73912b0137', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '55c475bfa35b12376efac0b67f26a0c3b31a20af', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '54b61a7b591f367d8a3c916021e7159e0eeed068', class: "modal__header" }, h("div", { key: '159e1b20bd85579ed7fdfe1e1459edca776bf6b6', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '473b559c8b3629a1071ca687a0f1ee52dc7d15d3', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
270
285
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
271
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
286
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'fd40a806fceca676a41b2253f82e18e960da806f', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
272
287
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
273
288
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
274
289
|
? this.fullscreenDisableButtonLabel
|
|
275
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
290
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '3d54e1b6df57be9faafc96e0aba51e1f7cc5493f', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '460cff9a5b1d6c5775a39534678af201909b3388', class: "modal__content-container", style: {
|
|
276
291
|
gap: this.contentGap
|
|
277
292
|
? `var(--s-space-${this.contentGap})`
|
|
278
293
|
: undefined,
|
|
279
|
-
} }, h("div", { key: '
|
|
294
|
+
} }, h("div", { key: '2c314687bf9553212f41be41d7ba40092cf4adbf', class: "modal__primary-content", style: {
|
|
280
295
|
maxWidth: this.primaryContentMaxWidth,
|
|
281
296
|
flex: this.primaryContentFlex,
|
|
282
|
-
} }, h("div", { key: '
|
|
297
|
+
} }, h("div", { key: 'd791af57ae248b9ad5e0872bcb193fefd1fef44b', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '8e5b801755e617dbae380c86d9b9a6c72203f915', name: "header-tools" })), h("div", { key: '460a2c618a871d1fed8927a676c0cef86607939f', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '91b8d1223e10c107392c4a6913d3483ccbe3c689' }))), h("div", { key: '8d7757d3ad4921e649e47e4052dc30c069bbb082', class: "modal__secondary-content", style: {
|
|
283
298
|
maxWidth: this.secondaryContentMaxWidth,
|
|
284
299
|
flex: this.secondaryContentFlex,
|
|
285
300
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -297,7 +312,7 @@ export class SwirlModal {
|
|
|
297
312
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
298
313
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
299
314
|
: undefined,
|
|
300
|
-
} }, h("slot", { key: '
|
|
315
|
+
} }, h("slot", { key: '0fee540e1ffcd87a4efd66394b9506073720d4f9', name: "secondary-content" }))), h("div", { key: 'e3d7e34eeb3a852801494b01590605736359ff93', class: "modal__custom-footer" }, h("slot", { key: 'f9152641cfe89640ded1ca29eecb6672b0c1db5a', name: "custom-footer" })), showControls && (h("footer", { key: '794fdc1f5f62174bb7e8dd22ebd2cf66263e78e4', class: "modal__controls" }, h("swirl-button-group", { key: 'eb5b75263ab691ea70dca2608ee4e3bae836dbe4', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'bd4f677b1b4fc4cd26a2d1bf4bdb3e2f54c43159', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6228911c5e114668d9a4dce63aff4c3931cfdb8a', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
301
316
|
}
|
|
302
317
|
static get is() { return "swirl-modal"; }
|
|
303
318
|
static get encapsulation() { return "shadow"; }
|
|
@@ -749,6 +764,30 @@ export class SwirlModal {
|
|
|
749
764
|
"setter": false,
|
|
750
765
|
"reflect": false
|
|
751
766
|
},
|
|
767
|
+
"returnFocusTo": {
|
|
768
|
+
"type": "string",
|
|
769
|
+
"attribute": "return-focus-to",
|
|
770
|
+
"mutable": false,
|
|
771
|
+
"complexType": {
|
|
772
|
+
"original": "HTMLElement | string",
|
|
773
|
+
"resolved": "HTMLElement | string",
|
|
774
|
+
"references": {
|
|
775
|
+
"HTMLElement": {
|
|
776
|
+
"location": "global",
|
|
777
|
+
"id": "global::HTMLElement"
|
|
778
|
+
}
|
|
779
|
+
}
|
|
780
|
+
},
|
|
781
|
+
"required": false,
|
|
782
|
+
"optional": true,
|
|
783
|
+
"docs": {
|
|
784
|
+
"tags": [],
|
|
785
|
+
"text": ""
|
|
786
|
+
},
|
|
787
|
+
"getter": false,
|
|
788
|
+
"setter": false,
|
|
789
|
+
"reflect": false
|
|
790
|
+
},
|
|
752
791
|
"secondaryContentPadding": {
|
|
753
792
|
"type": "string",
|
|
754
793
|
"attribute": "secondary-content-padding",
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { generateStoryElement } from "../../utils";
|
|
2
2
|
import Docs from "./swirl-modal.mdx";
|
|
3
3
|
export default {
|
|
4
|
+
argTypes: {
|
|
5
|
+
returnFocusTo: {
|
|
6
|
+
control: "text",
|
|
7
|
+
description: "Use when modal trigger element is unmounted before the modal is closed.",
|
|
8
|
+
},
|
|
9
|
+
},
|
|
4
10
|
component: "swirl-modal",
|
|
5
11
|
tags: ["autodocs"],
|
|
6
12
|
parameters: {
|