@getflip/swirl-components 0.444.0 → 0.445.1
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/cjs/swirl-tooltip.cjs.entry.js +3 -4
- package/dist/collection/components/swirl-dialog/swirl-dialog.js +22 -10
- package/dist/collection/components/swirl-modal/swirl-modal.js +29 -17
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.css +1 -4
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.js +2 -3
- 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/components/swirl-tooltip2.js +3 -4
- package/dist/esm/swirl-dialog.entry.js +12 -8
- package/dist/esm/swirl-modal.entry.js +19 -15
- package/dist/esm/swirl-tooltip.entry.js +3 -4
- 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/{p-460a10a6.entry.js → p-d84ee3aa.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-18T15:42:12",
|
|
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
|
};
|
|
@@ -5,7 +5,7 @@ var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
|
|
|
5
5
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
6
6
|
var utils = require('./utils-UfZG-xPD.js');
|
|
7
7
|
|
|
8
|
-
const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--
|
|
8
|
+
const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--visible .tooltip__popper{display:block;animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:fixed;display:none;opacity:0;border:none;padding:0;margin:0;background:transparent;overflow:visible}.tooltip__popper::backdrop{display:none}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);text-align:start;box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
|
|
9
9
|
|
|
10
10
|
const SwirlTooltip = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -143,10 +143,9 @@ const SwirlTooltip = class {
|
|
|
143
143
|
}
|
|
144
144
|
render() {
|
|
145
145
|
const className = index$1.classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, `tooltip--intent-${this.intent}`, {
|
|
146
|
-
"tooltip--active": this.active,
|
|
147
146
|
"tooltip--visible": this.visible,
|
|
148
147
|
});
|
|
149
|
-
return (index.h(index.Host, { key: '
|
|
148
|
+
return (index.h(index.Host, { key: '010020ddc1b958a08b9806d3e57b17e97109154d', onKeydown: this.onKeydown }, index.h("span", { key: 'a265bc8d5c392799559bb74996237bc607eeda67', class: className }, index.h("span", { key: 'cb6cae45449807674972224eb4102422fc678159', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, index.h("slot", { key: '8cb3b4429837c0a1571348384b768636b2b34e72' })), index.h("span", { key: 'a7b291999af9f054a5a13c21720dfe718d4c4d0d', class: "tooltip__popper", popover: "manual", ref: (el) => (this.popperEl = el), style: {
|
|
150
149
|
top: Boolean(this.actualPosition)
|
|
151
150
|
? `${this.actualPosition?.y}px`
|
|
152
151
|
: "",
|
|
@@ -154,7 +153,7 @@ const SwirlTooltip = class {
|
|
|
154
153
|
? `${this.actualPosition?.x}px`
|
|
155
154
|
: "",
|
|
156
155
|
maxWidth: this.maxWidth,
|
|
157
|
-
} }, this.visible && (index.h("span", { key: '
|
|
156
|
+
} }, this.visible && (index.h("span", { key: 'd65b55882eb78ac3d1ebf2d4fecd6bec1b9ae38d', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '01e3580f86e965d4e3b9a69590e232d6575f07ba', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '51d3f663e7983dd8eacd44dfed44bf96fd4a8d90', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
|
|
158
157
|
...this.arrowStyles,
|
|
159
158
|
visibility: this.visible ? "visible" : "hidden",
|
|
160
159
|
} })))));
|
|
@@ -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>"
|
|
@@ -11,11 +11,8 @@
|
|
|
11
11
|
display: contents;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.tooltip--active .tooltip__popper {
|
|
15
|
-
display: block;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
14
|
.tooltip--visible .tooltip__popper {
|
|
15
|
+
display: block;
|
|
19
16
|
animation: tooltip-fade-in 0.15s;
|
|
20
17
|
animation-delay: 0.1s;
|
|
21
18
|
animation-fill-mode: forwards;
|
|
@@ -137,10 +137,9 @@ export class SwirlTooltip {
|
|
|
137
137
|
}
|
|
138
138
|
render() {
|
|
139
139
|
const className = classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, `tooltip--intent-${this.intent}`, {
|
|
140
|
-
"tooltip--active": this.active,
|
|
141
140
|
"tooltip--visible": this.visible,
|
|
142
141
|
});
|
|
143
|
-
return (h(Host, { key: '
|
|
142
|
+
return (h(Host, { key: '010020ddc1b958a08b9806d3e57b17e97109154d', onKeydown: this.onKeydown }, h("span", { key: 'a265bc8d5c392799559bb74996237bc607eeda67', class: className }, h("span", { key: 'cb6cae45449807674972224eb4102422fc678159', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: '8cb3b4429837c0a1571348384b768636b2b34e72' })), h("span", { key: 'a7b291999af9f054a5a13c21720dfe718d4c4d0d', class: "tooltip__popper", popover: "manual", ref: (el) => (this.popperEl = el), style: {
|
|
144
143
|
top: Boolean(this.actualPosition)
|
|
145
144
|
? `${this.actualPosition?.y}px`
|
|
146
145
|
: "",
|
|
@@ -148,7 +147,7 @@ export class SwirlTooltip {
|
|
|
148
147
|
? `${this.actualPosition?.x}px`
|
|
149
148
|
: "",
|
|
150
149
|
maxWidth: this.maxWidth,
|
|
151
|
-
} }, this.visible && (h("span", { key: '
|
|
150
|
+
} }, this.visible && (h("span", { key: 'd65b55882eb78ac3d1ebf2d4fecd6bec1b9ae38d', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '01e3580f86e965d4e3b9a69590e232d6575f07ba', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '51d3f663e7983dd8eacd44dfed44bf96fd4a8d90', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
|
|
152
151
|
...this.arrowStyles,
|
|
153
152
|
visibility: this.visible ? "visible" : "hidden",
|
|
154
153
|
} })))));
|