@getflip/swirl-components 0.456.1 → 0.456.3
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-dialog.cjs.entry.js +15 -3
- package/dist/cjs/swirl-modal.cjs.entry.js +22 -10
- package/dist/cjs/swirl-toast-provider.cjs.entry.js +2 -1
- package/dist/collection/components/swirl-dialog/swirl-dialog.js +15 -3
- package/dist/collection/components/swirl-modal/swirl-modal.js +22 -10
- package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js +2 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-dialog.js +1 -1
- package/dist/components/swirl-modal.js +1 -1
- package/dist/components/swirl-toast-provider.js +1 -1
- package/dist/esm/swirl-dialog.entry.js +15 -3
- package/dist/esm/swirl-modal.entry.js +22 -10
- package/dist/esm/swirl-toast-provider.entry.js +2 -1
- package/dist/swirl-components/p-17e720d6.entry.js +1 -0
- package/dist/swirl-components/{p-617835a6.entry.js → p-2270f422.entry.js} +1 -1
- package/dist/swirl-components/p-48009167.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-3edd2000.entry.js +0 -1
- package/dist/swirl-components/p-d43a17fb.entry.js +0 -1
package/components.json
CHANGED
|
@@ -22,10 +22,22 @@ const SwirlDialog = class {
|
|
|
22
22
|
this.dialogClose.emit();
|
|
23
23
|
};
|
|
24
24
|
this.onToggle = (event) => {
|
|
25
|
-
|
|
25
|
+
const detail = {
|
|
26
26
|
newState: event.newState,
|
|
27
27
|
dialog: this.dialogEl,
|
|
28
|
-
}
|
|
28
|
+
};
|
|
29
|
+
if (this.el.isConnected) {
|
|
30
|
+
this.toggleDialog.emit(detail);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
// If the dialog is not connected to the DOM anymore, we dispatch
|
|
34
|
+
// a custom event to ensure the event is still emitted.
|
|
35
|
+
document.dispatchEvent(new CustomEvent("toggleDialog", {
|
|
36
|
+
bubbles: true,
|
|
37
|
+
composed: true,
|
|
38
|
+
detail,
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
29
41
|
};
|
|
30
42
|
this.onKeyDown = (event) => {
|
|
31
43
|
if (event.code === "Escape") {
|
|
@@ -108,7 +120,7 @@ const SwirlDialog = class {
|
|
|
108
120
|
render() {
|
|
109
121
|
const className = index$1.classnames("dialog", { "dialog--closing": this.closing });
|
|
110
122
|
const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
|
|
111
|
-
return (index.h(index.Host, { key: '
|
|
123
|
+
return (index.h(index.Host, { key: 'aed27fd60b073318b2bd447fbdea62b28a27b2bb' }, index.h("dialog", { key: '717b703063cc4f7dc4d6ebd0cb4e32cdd41fc6da', "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: '11cff9977346162bc0e379a2c6b12860efa9756e', class: "dialog__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'c537c3eaeb2688e7829163f1bb855f803fbd22b2', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (index.h("h2", { key: 'b673f936615fff1714137c5e3a0047e153103e2d', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), index.h("div", { key: '6078b644042f60e89dfe55debeb8aad6a80bed34', class: "dialog__content", part: "dialog__content", id: "content" }, index.h("slot", { key: '708bb8495998e1b91cebf23c4aba27d6225bdbe6' })), index.h("div", { key: 'b47c30c0db1a42257dd198a985fd3c26bcad4094', class: "dialog__controls" }, hasLeftControls && (index.h("div", { key: 'bc4cdcd98a8e57faa1f182ff8a85b261e7757c22', class: "dialog__left_controls" }, index.h("slot", { key: 'c3fc5d235a740e1bbd5e8e5b19fb5901188f82d2', name: "left-controls" }))), this.secondaryActionLabel && (index.h("swirl-button", { key: 'f728634b91e50864b1179267da1d465efae28f2a', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '87f838d8b11dfa270ba12c02a981b855029cf69c', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
|
|
112
124
|
}
|
|
113
125
|
get el() { return index.getElement(this); }
|
|
114
126
|
};
|
|
@@ -50,10 +50,22 @@ const SwirlModal = class {
|
|
|
50
50
|
this.modalClose.emit();
|
|
51
51
|
};
|
|
52
52
|
this.onToggle = (event) => {
|
|
53
|
-
|
|
53
|
+
const detail = {
|
|
54
54
|
newState: event.newState,
|
|
55
55
|
dialog: this.modalEl,
|
|
56
|
-
}
|
|
56
|
+
};
|
|
57
|
+
if (this.el.isConnected) {
|
|
58
|
+
this.toggleDialog.emit(detail);
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
// If the dialog is not connected to the DOM anymore, we dispatch
|
|
62
|
+
// a custom event to ensure the event is still emitted.
|
|
63
|
+
document.dispatchEvent(new CustomEvent("toggleDialog", {
|
|
64
|
+
bubbles: true,
|
|
65
|
+
composed: true,
|
|
66
|
+
detail,
|
|
67
|
+
}));
|
|
68
|
+
}
|
|
57
69
|
};
|
|
58
70
|
this.onBackdropClick = () => {
|
|
59
71
|
this.close();
|
|
@@ -281,29 +293,29 @@ const SwirlModal = class {
|
|
|
281
293
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
282
294
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
283
295
|
});
|
|
284
|
-
return (index.h(index.Host, { key: '
|
|
296
|
+
return (index.h(index.Host, { key: '5d7e303e02d067ed79ee08245beeb3505b23d0c8' }, index.h("dialog", { key: '499c2d3cf4d1db9c814fbd08de35103c653d8f53', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'fdafa4289dc0e7b1c52f7aba9a78e59e5461b4c3', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'd32e5cf93fd3527fa8959a07c489809bf3b5d524', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
285
297
|
? {
|
|
286
298
|
"--swirl-modal-max-height": this.maxHeight,
|
|
287
299
|
"--swirl-modal-height": this.height,
|
|
288
300
|
minHeight: this.minHeight,
|
|
289
301
|
maxWidth: this.maxWidth,
|
|
290
302
|
}
|
|
291
|
-
: {} }, index.h("aside", { key: '
|
|
303
|
+
: {} }, index.h("aside", { key: 'e0d0d96518649aca453d6ae1859d63c7476d0a16', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '7ddd6756a831afdf032390da6252810050118818', class: index$1.classnames("modal__sidebar-header", {
|
|
292
304
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
293
|
-
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '
|
|
305
|
+
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '512cebb0e33e605045841149b23a20242f32cb1f', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: 'c644af6fa65c441cb5561dbaf524b52887132501', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '4195cc1058fc42910fbf2827fa62315391870d69', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '621611853e79dd708997fbd79b2378a0e76f5560', name: "sidebar-content" })), index.h("div", { key: '8c2639486b76993821009975a0cffceb619ff665', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '51bbc2dff3eebdd9ad2ffbd67c6f97f192d5a1b8', name: "sidebar-footer" }))), index.h("div", { key: '2ce672d9d91a657d900cb7b467c67d1141d25af2', class: "modal__main-content" }, index.h("header", { key: '1deb15b62f8d97fcfc2dcff227a1c4f7810e96c1', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '971bab2b2bf9702423a0029e1377c92f27031216', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'f79ba8354749823c6ecff8d16a69a0692bc91116', class: "modal__header" }, index.h("div", { key: '5a782f2522d504b3159ad4dd16169ba559985c4d', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'd5ce47698af572d9c496e57166d2fd7758ba2501', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
294
306
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
295
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '
|
|
307
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '12158b9b8e9e198d50f9bfe1966d0647fc4c8d42', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
296
308
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
297
309
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
298
310
|
? this.fullscreenDisableButtonLabel
|
|
299
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '
|
|
311
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'eb66384e6bdd0591720155f875d7c8113d47bf40', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'cc0c0a5b1f8eadbf37e2ba0876481a68fbb213c2', class: "modal__content-container", style: {
|
|
300
312
|
gap: this.contentGap
|
|
301
313
|
? `var(--s-space-${this.contentGap})`
|
|
302
314
|
: undefined,
|
|
303
|
-
} }, index.h("div", { key: '
|
|
315
|
+
} }, index.h("div", { key: '4a540785ad16b194d2bf912c987854ef0aefaeb8', class: "modal__primary-content", style: {
|
|
304
316
|
maxWidth: this.primaryContentMaxWidth,
|
|
305
317
|
flex: this.primaryContentFlex,
|
|
306
|
-
} }, index.h("div", { key: '
|
|
318
|
+
} }, index.h("div", { key: '95f7eb2354c5449b18f432a07c4912491ed701ab', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '1d60b63d1000042a1448ee0244ccbd31d42bf8a2', name: "header-tools" })), index.h("div", { key: '4d16d27052062e70f03fa81bc01bbfea0c0805ba', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '05d0c4d3a5430691ca9e5074db7ef3e3ad37e03d' }))), index.h("div", { key: '78deb8ecfbacb2577219ee0859a45a5da7f93d8b', class: "modal__secondary-content", style: {
|
|
307
319
|
maxWidth: this.secondaryContentMaxWidth,
|
|
308
320
|
flex: this.secondaryContentFlex,
|
|
309
321
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -321,7 +333,7 @@ const SwirlModal = class {
|
|
|
321
333
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
322
334
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
323
335
|
: undefined,
|
|
324
|
-
} }, index.h("slot", { key: '
|
|
336
|
+
} }, index.h("slot", { key: 'cd72bf9a5874503c9bc7b17733b6fbe84ce6cae4', name: "secondary-content" }))), index.h("div", { key: '0ca496f691300e9fbc4ee6a6b867b6501c1f292a', class: "modal__custom-footer" }, index.h("slot", { key: 'e428f004ed058339b520198f110064e625f8e03b', name: "custom-footer" })), showControls && (index.h("footer", { key: 'd457989e84d2e354abd444f27458dab14021cb8b', class: "modal__controls" }, index.h("swirl-button-group", { key: '74b3bba2bb32d70f080de8f7e212385805fc1a49', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '7fcfe9e269a81e0fcb9039a52071878c58951a78', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'da1cb3c478d8f0d8bf41c4e6adfd76d2e16966ec', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
325
337
|
}
|
|
326
338
|
get el() { return index.getElement(this); }
|
|
327
339
|
};
|
|
@@ -111,6 +111,7 @@ const SwirlToastProvider = class {
|
|
|
111
111
|
* This is necessary to allow toasts to be interactable when a dialog is open, otherwise the toasts would be inert.
|
|
112
112
|
*/
|
|
113
113
|
ensureCorrectPosition() {
|
|
114
|
+
this.activeDialogStack = this.activeDialogStack.filter((dialog) => dialog.isConnected);
|
|
114
115
|
const parent = this.activeDialogStack[this.activeDialogStack.length - 1] ||
|
|
115
116
|
this.originalParent;
|
|
116
117
|
if (this.el.parentElement !== parent) {
|
|
@@ -120,7 +121,7 @@ const SwirlToastProvider = class {
|
|
|
120
121
|
this.popoverEl.showPopover();
|
|
121
122
|
}
|
|
122
123
|
render() {
|
|
123
|
-
return (index.h(index.Host, { key: '
|
|
124
|
+
return (index.h(index.Host, { key: 'b814bfac33e13fa660a10ec5d29f5f45fbac8f8d', role: "status" }, index.h("swirl-stack", { key: '03972a88936dfd3697335295381889095f6fb3a8', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
|
|
124
125
|
const props = {
|
|
125
126
|
...toast,
|
|
126
127
|
content: undefined,
|
|
@@ -15,10 +15,22 @@ export class SwirlDialog {
|
|
|
15
15
|
this.dialogClose.emit();
|
|
16
16
|
};
|
|
17
17
|
this.onToggle = (event) => {
|
|
18
|
-
|
|
18
|
+
const detail = {
|
|
19
19
|
newState: event.newState,
|
|
20
20
|
dialog: this.dialogEl,
|
|
21
|
-
}
|
|
21
|
+
};
|
|
22
|
+
if (this.el.isConnected) {
|
|
23
|
+
this.toggleDialog.emit(detail);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
// If the dialog is not connected to the DOM anymore, we dispatch
|
|
27
|
+
// a custom event to ensure the event is still emitted.
|
|
28
|
+
document.dispatchEvent(new CustomEvent("toggleDialog", {
|
|
29
|
+
bubbles: true,
|
|
30
|
+
composed: true,
|
|
31
|
+
detail,
|
|
32
|
+
}));
|
|
33
|
+
}
|
|
22
34
|
};
|
|
23
35
|
this.onKeyDown = (event) => {
|
|
24
36
|
if (event.code === "Escape") {
|
|
@@ -101,7 +113,7 @@ export class SwirlDialog {
|
|
|
101
113
|
render() {
|
|
102
114
|
const className = classnames("dialog", { "dialog--closing": this.closing });
|
|
103
115
|
const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
|
|
104
|
-
return (h(Host, { key: '
|
|
116
|
+
return (h(Host, { key: 'aed27fd60b073318b2bd447fbdea62b28a27b2bb' }, h("dialog", { key: '717b703063cc4f7dc4d6ebd0cb4e32cdd41fc6da', "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: '11cff9977346162bc0e379a2c6b12860efa9756e', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'c537c3eaeb2688e7829163f1bb855f803fbd22b2', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'b673f936615fff1714137c5e3a0047e153103e2d', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '6078b644042f60e89dfe55debeb8aad6a80bed34', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '708bb8495998e1b91cebf23c4aba27d6225bdbe6' })), h("div", { key: 'b47c30c0db1a42257dd198a985fd3c26bcad4094', class: "dialog__controls" }, hasLeftControls && (h("div", { key: 'bc4cdcd98a8e57faa1f182ff8a85b261e7757c22', class: "dialog__left_controls" }, h("slot", { key: 'c3fc5d235a740e1bbd5e8e5b19fb5901188f82d2', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: 'f728634b91e50864b1179267da1d465efae28f2a', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '87f838d8b11dfa270ba12c02a981b855029cf69c', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
|
|
105
117
|
}
|
|
106
118
|
static get is() { return "swirl-dialog"; }
|
|
107
119
|
static get encapsulation() { return "shadow"; }
|
|
@@ -45,10 +45,22 @@ export class SwirlModal {
|
|
|
45
45
|
this.modalClose.emit();
|
|
46
46
|
};
|
|
47
47
|
this.onToggle = (event) => {
|
|
48
|
-
|
|
48
|
+
const detail = {
|
|
49
49
|
newState: event.newState,
|
|
50
50
|
dialog: this.modalEl,
|
|
51
|
-
}
|
|
51
|
+
};
|
|
52
|
+
if (this.el.isConnected) {
|
|
53
|
+
this.toggleDialog.emit(detail);
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
// If the dialog is not connected to the DOM anymore, we dispatch
|
|
57
|
+
// a custom event to ensure the event is still emitted.
|
|
58
|
+
document.dispatchEvent(new CustomEvent("toggleDialog", {
|
|
59
|
+
bubbles: true,
|
|
60
|
+
composed: true,
|
|
61
|
+
detail,
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
52
64
|
};
|
|
53
65
|
this.onBackdropClick = () => {
|
|
54
66
|
this.close();
|
|
@@ -276,29 +288,29 @@ export class SwirlModal {
|
|
|
276
288
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
277
289
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
278
290
|
});
|
|
279
|
-
return (h(Host, { key: '
|
|
291
|
+
return (h(Host, { key: '5d7e303e02d067ed79ee08245beeb3505b23d0c8' }, h("dialog", { key: '499c2d3cf4d1db9c814fbd08de35103c653d8f53', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'fdafa4289dc0e7b1c52f7aba9a78e59e5461b4c3', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'd32e5cf93fd3527fa8959a07c489809bf3b5d524', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
280
292
|
? {
|
|
281
293
|
"--swirl-modal-max-height": this.maxHeight,
|
|
282
294
|
"--swirl-modal-height": this.height,
|
|
283
295
|
minHeight: this.minHeight,
|
|
284
296
|
maxWidth: this.maxWidth,
|
|
285
297
|
}
|
|
286
|
-
: {} }, h("aside", { key: '
|
|
298
|
+
: {} }, h("aside", { key: 'e0d0d96518649aca453d6ae1859d63c7476d0a16', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '7ddd6756a831afdf032390da6252810050118818', class: classnames("modal__sidebar-header", {
|
|
287
299
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
288
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
300
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '512cebb0e33e605045841149b23a20242f32cb1f', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: 'c644af6fa65c441cb5561dbaf524b52887132501', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '4195cc1058fc42910fbf2827fa62315391870d69', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '621611853e79dd708997fbd79b2378a0e76f5560', name: "sidebar-content" })), h("div", { key: '8c2639486b76993821009975a0cffceb619ff665', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '51bbc2dff3eebdd9ad2ffbd67c6f97f192d5a1b8', name: "sidebar-footer" }))), h("div", { key: '2ce672d9d91a657d900cb7b467c67d1141d25af2', class: "modal__main-content" }, h("header", { key: '1deb15b62f8d97fcfc2dcff227a1c4f7810e96c1', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '971bab2b2bf9702423a0029e1377c92f27031216', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'f79ba8354749823c6ecff8d16a69a0692bc91116', class: "modal__header" }, h("div", { key: '5a782f2522d504b3159ad4dd16169ba559985c4d', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd5ce47698af572d9c496e57166d2fd7758ba2501', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
289
301
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
290
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
302
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '12158b9b8e9e198d50f9bfe1966d0647fc4c8d42', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
291
303
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
292
304
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
293
305
|
? this.fullscreenDisableButtonLabel
|
|
294
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
306
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'eb66384e6bdd0591720155f875d7c8113d47bf40', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'cc0c0a5b1f8eadbf37e2ba0876481a68fbb213c2', class: "modal__content-container", style: {
|
|
295
307
|
gap: this.contentGap
|
|
296
308
|
? `var(--s-space-${this.contentGap})`
|
|
297
309
|
: undefined,
|
|
298
|
-
} }, h("div", { key: '
|
|
310
|
+
} }, h("div", { key: '4a540785ad16b194d2bf912c987854ef0aefaeb8', class: "modal__primary-content", style: {
|
|
299
311
|
maxWidth: this.primaryContentMaxWidth,
|
|
300
312
|
flex: this.primaryContentFlex,
|
|
301
|
-
} }, h("div", { key: '
|
|
313
|
+
} }, h("div", { key: '95f7eb2354c5449b18f432a07c4912491ed701ab', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '1d60b63d1000042a1448ee0244ccbd31d42bf8a2', name: "header-tools" })), h("div", { key: '4d16d27052062e70f03fa81bc01bbfea0c0805ba', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '05d0c4d3a5430691ca9e5074db7ef3e3ad37e03d' }))), h("div", { key: '78deb8ecfbacb2577219ee0859a45a5da7f93d8b', class: "modal__secondary-content", style: {
|
|
302
314
|
maxWidth: this.secondaryContentMaxWidth,
|
|
303
315
|
flex: this.secondaryContentFlex,
|
|
304
316
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -316,7 +328,7 @@ export class SwirlModal {
|
|
|
316
328
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
317
329
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
318
330
|
: undefined,
|
|
319
|
-
} }, h("slot", { key: '
|
|
331
|
+
} }, h("slot", { key: 'cd72bf9a5874503c9bc7b17733b6fbe84ce6cae4', name: "secondary-content" }))), h("div", { key: '0ca496f691300e9fbc4ee6a6b867b6501c1f292a', class: "modal__custom-footer" }, h("slot", { key: 'e428f004ed058339b520198f110064e625f8e03b', name: "custom-footer" })), showControls && (h("footer", { key: 'd457989e84d2e354abd444f27458dab14021cb8b', class: "modal__controls" }, h("swirl-button-group", { key: '74b3bba2bb32d70f080de8f7e212385805fc1a49', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '7fcfe9e269a81e0fcb9039a52071878c58951a78', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'da1cb3c478d8f0d8bf41c4e6adfd76d2e16966ec', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
320
332
|
}
|
|
321
333
|
static get is() { return "swirl-modal"; }
|
|
322
334
|
static get encapsulation() { return "shadow"; }
|
|
@@ -105,6 +105,7 @@ export class SwirlToastProvider {
|
|
|
105
105
|
* This is necessary to allow toasts to be interactable when a dialog is open, otherwise the toasts would be inert.
|
|
106
106
|
*/
|
|
107
107
|
ensureCorrectPosition() {
|
|
108
|
+
this.activeDialogStack = this.activeDialogStack.filter((dialog) => dialog.isConnected);
|
|
108
109
|
const parent = this.activeDialogStack[this.activeDialogStack.length - 1] ||
|
|
109
110
|
this.originalParent;
|
|
110
111
|
if (this.el.parentElement !== parent) {
|
|
@@ -114,7 +115,7 @@ export class SwirlToastProvider {
|
|
|
114
115
|
this.popoverEl.showPopover();
|
|
115
116
|
}
|
|
116
117
|
render() {
|
|
117
|
-
return (h(Host, { key: '
|
|
118
|
+
return (h(Host, { key: 'b814bfac33e13fa660a10ec5d29f5f45fbac8f8d', role: "status" }, h("swirl-stack", { key: '03972a88936dfd3697335295381889095f6fb3a8', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
|
|
118
119
|
const props = {
|
|
119
120
|
...toast,
|
|
120
121
|
content: undefined,
|