@getflip/swirl-components 0.363.3 → 0.363.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +1 -1
- package/dist/cjs/swirl-modal.cjs.entry.js +10 -10
- package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +2 -2
- package/dist/collection/components/swirl-modal/swirl-modal.js +10 -10
- package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js +2 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +28 -0
- package/dist/components/swirl-modal.js +10 -10
- package/dist/components/swirl-shell-navigation-item.js +2 -2
- package/dist/esm/swirl-modal.entry.js +10 -10
- package/dist/esm/swirl-shell-navigation-item.entry.js +2 -2
- package/dist/swirl-components/p-a2aba920.entry.js +1 -0
- package/dist/swirl-components/p-c94f245b.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-5e243452.entry.js +0 -1
- package/dist/swirl-components/p-a6609f84.entry.js +0 -1
|
@@ -131,7 +131,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
131
131
|
this.determineScrollStatus();
|
|
132
132
|
});
|
|
133
133
|
setTimeout(() => {
|
|
134
|
-
this.focusTrap
|
|
134
|
+
this.focusTrap?.activate();
|
|
135
135
|
this.handleAutoFocus();
|
|
136
136
|
}, 200);
|
|
137
137
|
}
|
|
@@ -149,7 +149,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
149
149
|
this.closing = true;
|
|
150
150
|
this.unlockBodyScroll();
|
|
151
151
|
setTimeout(() => {
|
|
152
|
-
this.focusTrap
|
|
152
|
+
this.focusTrap?.deactivate();
|
|
153
153
|
this.isOpen = false;
|
|
154
154
|
this.modalClose.emit();
|
|
155
155
|
this.closing = false;
|
|
@@ -238,29 +238,29 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
238
238
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
239
239
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
240
240
|
});
|
|
241
|
-
return (h(Host, { key: '
|
|
241
|
+
return (h(Host, { key: '7c24fee5323e2df19dabcb9a5a91655f0f28d4a1' }, h("section", { key: '4c30f0c893b6dbff9583c739793c877db7776d13', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '9c54e0b2b50d584c7e1ee97f2228d3d7d9b3cdf8', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'ac2f5576bfbf714ba3a6bf1eda46c25d30237737', class: "modal__body", style: !this.isFullscreen
|
|
242
242
|
? {
|
|
243
243
|
"--swirl-modal-max-height": this.maxHeight,
|
|
244
244
|
"--swirl-modal-height": this.height,
|
|
245
245
|
minHeight: this.minHeight,
|
|
246
246
|
maxWidth: this.maxWidth,
|
|
247
247
|
}
|
|
248
|
-
: {} }, h("aside", { key: '
|
|
248
|
+
: {} }, h("aside", { key: '8ef849f9a5e17ccceb7cff955e39bc28892dd28c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '2352dc5cb17e549f064dcd5ed0abfb7d99fec9e3', class: classNames("modal__sidebar-header", {
|
|
249
249
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
250
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
250
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '004b9da5c81869306984a3aa87519ae452800fd1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '69bde9ad0b480e9969e56c089c29117bf1f28d10', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'a6346c2c7fde58212c6f5097d5d70606c3183e1b', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '02bcee4978aa640ecbb3b4417cdb3e50291445cb', name: "sidebar-content" })), h("div", { key: '136c44311e48b3b88db6c642f245915656e59233', class: "modal__sidebar-footer" }, h("slot", { key: 'a5e8df9f9147b7da7fd96a7efb9b3f71d4075d45', name: "sidebar-footer" }))), h("div", { key: 'bb0170d8b569589cb559fedadfb3a0723c618934', class: "modal__main-content" }, h("header", { key: 'ee87585b97d37bd9521a3efb97af9c24fea9d83e', class: "modal__custom-header" }, h("slot", { key: '5ee6d3e095940d24906edb710a574a13d82566ec', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '387bfdb294a2da6dca9126e19127548770d7e323', class: "modal__header" }, h("div", { key: '4a54700cd7a2824447892206073af4f5dbec9451', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd6c3c80fb0c2cdee570e987bcc290e6581246f74', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
251
251
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
252
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
252
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'c3879455946bd91bf57c33fd8693fe0601933ead', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
253
253
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
254
254
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
255
255
|
? this.fullscreenDisableButtonLabel
|
|
256
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
256
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'd3b7a16db9e4feae042a90ae3d2d8505757205ff', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '3b55bc21765c6d3ed98cd7c8787fe69906164aeb', class: "modal__content-container", style: {
|
|
257
257
|
gap: this.contentGap
|
|
258
258
|
? `var(--s-space-${this.contentGap})`
|
|
259
259
|
: undefined,
|
|
260
|
-
} }, h("div", { key: '
|
|
260
|
+
} }, h("div", { key: 'd417c7f1e060b64bc7be2b98bffd5a1d1d460c0a', class: "modal__primary-content", style: {
|
|
261
261
|
maxWidth: this.primaryContentMaxWidth,
|
|
262
262
|
flex: this.primaryContentFlex,
|
|
263
|
-
} }, h("div", { key: '
|
|
263
|
+
} }, h("div", { key: '36fc3cce5333dec26141a19ed94e16d0e536bd32', class: "modal__header-tools" }, h("slot", { key: '36df33eb9c484e602ed9c5d245f50e4ebcbff514', name: "header-tools" })), h("div", { key: '3a1fd477b1d5b70291d163f3e0c2759fde8dd34c', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'cdd147f7e0320742091611b92ef5318065d6bd2f' }))), h("div", { key: 'bafcb6677a0da44e76e56ca189a8dbf4afa1f573', class: "modal__secondary-content", style: {
|
|
264
264
|
maxWidth: this.secondaryContentMaxWidth,
|
|
265
265
|
flex: this.secondaryContentFlex,
|
|
266
266
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -278,7 +278,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
|
|
|
278
278
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
279
279
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
280
280
|
: undefined,
|
|
281
|
-
} }, h("slot", { key: '
|
|
281
|
+
} }, h("slot", { key: 'c6061a71b7d66b3e204ff7c4f075ae4908c4cfae', name: "secondary-content" }))), h("div", { key: 'd1501d2c4431b43d053a67e3fb99922dea905dcb', class: "modal__custom-footer" }, h("slot", { key: '404cb5ab7559754b1944fbb675518afcfffcadfd', name: "custom-footer" })), showControls && (h("footer", { key: 'f2cadd2076b5c180494935945894fd468e0c46ba', class: "modal__controls" }, h("swirl-button-group", { key: 'd24df43e386d5431f5df152c5840bd290dbb38fd', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '1cb65ccd7d85057820d2afb79e647f078d70a9c7', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '705ca5cf78b9d0f0c576288cf94f6d9208e66def', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
282
282
|
}
|
|
283
283
|
get el() { return this; }
|
|
284
284
|
static get style() { return swirlModalCss; }
|
|
@@ -65,9 +65,9 @@ const SwirlShellNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlS
|
|
|
65
65
|
const tooltipContent = this.description
|
|
66
66
|
? `${this.label} ${this.description}`
|
|
67
67
|
: this.label;
|
|
68
|
-
return (h(Host, { key: '8cdedcd426b2b2e2009c935f803d63426c4e4515' }, h("swirl-tooltip", { key: 'ef8e5f86988bbba1cfbe8c1dc446b6d3bb500446', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '
|
|
68
|
+
return (h(Host, { key: '8cdedcd426b2b2e2009c935f803d63426c4e4515' }, h("swirl-tooltip", { key: 'ef8e5f86988bbba1cfbe8c1dc446b6d3bb500446', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'c0e7008e92689e61f70d644541d8520f58731783', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: 'c78cb91aae92b6dff68038a16d304ee3a4304c78', class: "shell-navigation-item__icon" }, h("slot", { key: '31478c066302a3a54ffc18d1702bf296bf279940', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: 'beaa48fff9d31f5e6bd0c700d1518703035417ef', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: '209480b493dc2cf33c27d8794ff872849108d982', "aria-label": this.badgeLabel, class: classNames("shell-navigation-item__badge", {
|
|
69
69
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
70
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '
|
|
70
|
+
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '0d394f4d45fd5a6db4bd4fbd654696bf6017b030', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: '9d3f39f372a5fcaefb7113b4191eccd726e36a1f', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
|
|
71
71
|
}
|
|
72
72
|
get el() { return this; }
|
|
73
73
|
static get style() { return swirlShellNavigationItemCss; }
|
|
@@ -126,7 +126,7 @@ const SwirlModal = class {
|
|
|
126
126
|
this.determineScrollStatus();
|
|
127
127
|
});
|
|
128
128
|
setTimeout(() => {
|
|
129
|
-
this.focusTrap
|
|
129
|
+
this.focusTrap?.activate();
|
|
130
130
|
this.handleAutoFocus();
|
|
131
131
|
}, 200);
|
|
132
132
|
}
|
|
@@ -144,7 +144,7 @@ const SwirlModal = class {
|
|
|
144
144
|
this.closing = true;
|
|
145
145
|
this.unlockBodyScroll();
|
|
146
146
|
setTimeout(() => {
|
|
147
|
-
this.focusTrap
|
|
147
|
+
this.focusTrap?.deactivate();
|
|
148
148
|
this.isOpen = false;
|
|
149
149
|
this.modalClose.emit();
|
|
150
150
|
this.closing = false;
|
|
@@ -233,29 +233,29 @@ const SwirlModal = class {
|
|
|
233
233
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
234
234
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
235
235
|
});
|
|
236
|
-
return (h(Host, { key: '
|
|
236
|
+
return (h(Host, { key: '7c24fee5323e2df19dabcb9a5a91655f0f28d4a1' }, h("section", { key: '4c30f0c893b6dbff9583c739793c877db7776d13', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '9c54e0b2b50d584c7e1ee97f2228d3d7d9b3cdf8', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'ac2f5576bfbf714ba3a6bf1eda46c25d30237737', class: "modal__body", style: !this.isFullscreen
|
|
237
237
|
? {
|
|
238
238
|
"--swirl-modal-max-height": this.maxHeight,
|
|
239
239
|
"--swirl-modal-height": this.height,
|
|
240
240
|
minHeight: this.minHeight,
|
|
241
241
|
maxWidth: this.maxWidth,
|
|
242
242
|
}
|
|
243
|
-
: {} }, h("aside", { key: '
|
|
243
|
+
: {} }, h("aside", { key: '8ef849f9a5e17ccceb7cff955e39bc28892dd28c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '2352dc5cb17e549f064dcd5ed0abfb7d99fec9e3', class: classnames("modal__sidebar-header", {
|
|
244
244
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
245
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
245
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '004b9da5c81869306984a3aa87519ae452800fd1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '69bde9ad0b480e9969e56c089c29117bf1f28d10', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'a6346c2c7fde58212c6f5097d5d70606c3183e1b', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '02bcee4978aa640ecbb3b4417cdb3e50291445cb', name: "sidebar-content" })), h("div", { key: '136c44311e48b3b88db6c642f245915656e59233', class: "modal__sidebar-footer" }, h("slot", { key: 'a5e8df9f9147b7da7fd96a7efb9b3f71d4075d45', name: "sidebar-footer" }))), h("div", { key: 'bb0170d8b569589cb559fedadfb3a0723c618934', class: "modal__main-content" }, h("header", { key: 'ee87585b97d37bd9521a3efb97af9c24fea9d83e', class: "modal__custom-header" }, h("slot", { key: '5ee6d3e095940d24906edb710a574a13d82566ec', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '387bfdb294a2da6dca9126e19127548770d7e323', class: "modal__header" }, h("div", { key: '4a54700cd7a2824447892206073af4f5dbec9451', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd6c3c80fb0c2cdee570e987bcc290e6581246f74', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
246
246
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
247
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
247
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'c3879455946bd91bf57c33fd8693fe0601933ead', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
248
248
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
249
249
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
250
250
|
? this.fullscreenDisableButtonLabel
|
|
251
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
251
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'd3b7a16db9e4feae042a90ae3d2d8505757205ff', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '3b55bc21765c6d3ed98cd7c8787fe69906164aeb', class: "modal__content-container", style: {
|
|
252
252
|
gap: this.contentGap
|
|
253
253
|
? `var(--s-space-${this.contentGap})`
|
|
254
254
|
: undefined,
|
|
255
|
-
} }, h("div", { key: '
|
|
255
|
+
} }, h("div", { key: 'd417c7f1e060b64bc7be2b98bffd5a1d1d460c0a', class: "modal__primary-content", style: {
|
|
256
256
|
maxWidth: this.primaryContentMaxWidth,
|
|
257
257
|
flex: this.primaryContentFlex,
|
|
258
|
-
} }, h("div", { key: '
|
|
258
|
+
} }, h("div", { key: '36fc3cce5333dec26141a19ed94e16d0e536bd32', class: "modal__header-tools" }, h("slot", { key: '36df33eb9c484e602ed9c5d245f50e4ebcbff514', name: "header-tools" })), h("div", { key: '3a1fd477b1d5b70291d163f3e0c2759fde8dd34c', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'cdd147f7e0320742091611b92ef5318065d6bd2f' }))), h("div", { key: 'bafcb6677a0da44e76e56ca189a8dbf4afa1f573', class: "modal__secondary-content", style: {
|
|
259
259
|
maxWidth: this.secondaryContentMaxWidth,
|
|
260
260
|
flex: this.secondaryContentFlex,
|
|
261
261
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -273,7 +273,7 @@ const SwirlModal = class {
|
|
|
273
273
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
274
274
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
275
275
|
: undefined,
|
|
276
|
-
} }, h("slot", { key: '
|
|
276
|
+
} }, h("slot", { key: 'c6061a71b7d66b3e204ff7c4f075ae4908c4cfae', name: "secondary-content" }))), h("div", { key: 'd1501d2c4431b43d053a67e3fb99922dea905dcb', class: "modal__custom-footer" }, h("slot", { key: '404cb5ab7559754b1944fbb675518afcfffcadfd', name: "custom-footer" })), showControls && (h("footer", { key: 'f2cadd2076b5c180494935945894fd468e0c46ba', class: "modal__controls" }, h("swirl-button-group", { key: 'd24df43e386d5431f5df152c5840bd290dbb38fd', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '1cb65ccd7d85057820d2afb79e647f078d70a9c7', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '705ca5cf78b9d0f0c576288cf94f6d9208e66def', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
277
277
|
}
|
|
278
278
|
get el() { return getElement(this); }
|
|
279
279
|
};
|
|
@@ -58,9 +58,9 @@ const SwirlShellNavigationItem = class {
|
|
|
58
58
|
const tooltipContent = this.description
|
|
59
59
|
? `${this.label} ${this.description}`
|
|
60
60
|
: this.label;
|
|
61
|
-
return (h(Host, { key: '8cdedcd426b2b2e2009c935f803d63426c4e4515' }, h("swirl-tooltip", { key: 'ef8e5f86988bbba1cfbe8c1dc446b6d3bb500446', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '
|
|
61
|
+
return (h(Host, { key: '8cdedcd426b2b2e2009c935f803d63426c4e4515' }, h("swirl-tooltip", { key: 'ef8e5f86988bbba1cfbe8c1dc446b6d3bb500446', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'c0e7008e92689e61f70d644541d8520f58731783', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: 'c78cb91aae92b6dff68038a16d304ee3a4304c78', class: "shell-navigation-item__icon" }, h("slot", { key: '31478c066302a3a54ffc18d1702bf296bf279940', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: 'beaa48fff9d31f5e6bd0c700d1518703035417ef', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: '209480b493dc2cf33c27d8794ff872849108d982', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
|
|
62
62
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
63
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '
|
|
63
|
+
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '0d394f4d45fd5a6db4bd4fbd654696bf6017b030', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: '9d3f39f372a5fcaefb7113b4191eccd726e36a1f', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
|
|
64
64
|
}
|
|
65
65
|
get el() { return getElement(this); }
|
|
66
66
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as n,h as i,H as e,d as a}from"./p-CWOhMVtL.js";import{c as t}from"./p-orsBiyT_.js";const l=class{constructor(i){n(this,i),this.hideLabel=!1,this.inlineLabelColor="default",this.markAsNewLabel="New",this.variant="default"}componentWillLoad(){this.forceIconProps()}componentDidRender(){this.forceIconProps()}forceIconProps(){const n=this.el.querySelector("[slot='icon']"),i=this.hideLabel&&"app-icon"===this.variant||"default"===this.variant;n&&(n.tagName.startsWith("SWIRL-ICON")||n.tagName.startsWith("SWIRL-EMOJI")||n.tagName.startsWith("SWIRL-SYMBOL"))&&n.setAttribute("size",i?"20":"24")}render(){const n=Boolean(this.el.querySelector("swirl-app-icon")),a=t("shell-navigation-item",`shell-navigation-item--${this.variant}`,{"shell-navigation-item--active":this.active,"shell-navigation-item--boxed":this.boxed,"shell-navigation-item--filled":this.filled,"shell-navigation-item--inline-label":this.inlineLabel,"shell-navigation-item--gradient":this.withGradient,"shell-navigation-item--hide-label":this.hideLabel,"shell-navigation-item--has-app-icon":n}),l=t("shell-navigation-item__label",{"shell-navigation-item__label--light":"light"===this.inlineLabelColor,"shell-navigation-item__label--dark":"dark"===this.inlineLabelColor,"shell-navigation-item__label--inline":this.inlineLabel}),s=null!=this.badgeLabel,o=!s&&this.markAsNew&&!this.hideLabel&&"default"===this.variant,r=!s&&this.markAsNew&&this.hideLabel&&"default"===this.variant,h=Boolean(this.href);return i(e,{key:"8cdedcd426b2b2e2009c935f803d63426c4e4515"},i("swirl-tooltip",{key:"ef8e5f86988bbba1cfbe8c1dc446b6d3bb500446",active:this.hideLabel,content:this.description?`${this.label} ${this.description}`:this.label,delay:100,position:"right",positioning:"fixed"},i(h?"a":"button",{key:"c0e7008e92689e61f70d644541d8520f58731783",class:a,href:this.href,target:this.target,type:h?void 0:"button",title:this.hideLabel?void 0:this.label},i("span",{key:"c78cb91aae92b6dff68038a16d304ee3a4304c78",class:"shell-navigation-item__icon"},i("slot",{key:"31478c066302a3a54ffc18d1702bf296bf279940",name:"icon"})),this.hideLabel?i("swirl-visually-hidden",null,i("span",{class:l},this.label)):"default"!==this.variant?i("span",{class:l},this.label):i("div",{class:"shell-navigation-item__text-wrapper"},i("span",{class:l},this.label),this.description&&i("span",{class:"shell-navigation-item__description"},this.description)),s&&i("span",{key:"beaa48fff9d31f5e6bd0c700d1518703035417ef",class:"shell-navigation-item__badge-wrapper"},i("swirl-badge",{key:"209480b493dc2cf33c27d8794ff872849108d982","aria-label":this.badgeLabel,class:t("shell-navigation-item__badge",{"shell-navigation-item__badge--dot":""===this.badgeLabel}),label:this.badgeLabel,size:"xs",variant:""===this.badgeLabel?"dot":"default"})),o&&i("swirl-tag",{key:"0d394f4d45fd5a6db4bd4fbd654696bf6017b030",class:"shell-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"s",variant:"strong"}),r&&i("swirl-badge",{key:"9d3f39f372a5fcaefb7113b4191eccd726e36a1f",class:"shell-navigation-item__is-new-badge",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"xs",variant:"dot"}))))}get el(){return a(this)}};l.style='/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 2rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge,\n .shell-navigation-item:hover .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge,\n .shell-navigation-item:active .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--filled {\n padding: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n color: var(--s-icon-on-action-primary);\n background-color: var(--s-action-primary-default);\n }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: "";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n --swirl-app-icon-size: 100%;\n font-size: var(--s-font-size-xs);\n padding: var(--s-space-8) var(--s-space-4);\n align-items: center;\n height: auto;\n border-radius: var(--s-border-radius-sm);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n align-items: start;\n padding: var(--s-space-8);\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n max-width: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n max-width: 2rem;\n max-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n max-width: 3.5rem;\n height: auto;\n border-radius: var(--s-border-radius-base);\n\n color: var(--s-icon-on-action-primary);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n max-width: 3.5rem;\n max-height: 3.5rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n line-height: var(--s-line-height-xs);\n text-align: center;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\n }\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n margin-left: var(--s-space-8);\n font-weight: var(--s-font-weight-normal);\n color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n position: absolute;\n top: 0.625rem;\n right: 0.625rem;\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n';export{l as swirl_shell_navigation_item}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,c as e,h as d,H as o,d as t}from"./p-CWOhMVtL.js";import{d as s,e as r}from"./p-B0kNlhKL.js";import{c as i}from"./p-orsBiyT_.js";import{c as l}from"./p-DIdMBZfn.js";import{k as n}from"./p-D_MUFqkF.js";const m=class{constructor(d){a(this,d),this.toggleFullscreen=e(this,"toggleFullscreen",7),this.modalClose=e(this,"modalClose",7),this.modalOpen=e(this,"modalOpen",7),this.primaryAction=e(this,"primaryAction",7),this.requestModalClose=e(this,"requestModalClose",7),this.secondaryAction=e(this,"secondaryAction",7),this.sidebarClose=e(this,"sidebarClose",7),this.closable=!0,this.closeButtonLabel="Close modal",this.fullscreenEnableButtonLabel="Full screen",this.fullscreenDisableButtonLabel="Exit full screen",this.padded=!0,this.variant="default",this.sidebarPadded=!0,this.sidebarFooterPadded=!0,this.sidebarCloseButtonLabel="Close sidebar",this.isOpen=!1,this.isFullscreen=!1,this.isFullscreenTransitioning=!1,this.closing=!1,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1,this.sidebarScrolled=!1,this.sidebarScrolledDown=!1,this.sidebarScrollable=!1,this.onKeyDown=a=>{"Escape"===a.code&&(a.stopImmediatePropagation(),this.close())},this.onBackdropClick=()=>{this.close()},this.onCloseButtonClick=()=>{this.close()},this.onFullscreenButtonClick=()=>{this.setFullscreen(!this.isFullscreen)},this.onSidebarCloseButtonClick=()=>{this.hideSidebarContent=!0,this.sidebarClose.emit()},this.onPrimaryAction=a=>{this.primaryAction.emit(a)},this.onSecondaryAction=a=>{this.secondaryAction.emit(a)},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,e=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,d=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),e!==this.scrolledDown&&(this.scrolledDown=e),d!==this.scrollable&&(this.scrollable=d)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,e=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,d=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),e!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=e),d!==this.sidebarScrollable&&(this.sidebarScrollable=d)}}componentDidLoad(){this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}componentDidRender(){this.focusTrap?.updateContainerElements(this.modalEl)}disconnectedCallback(){this.focusTrap?.deactivate(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(){this.isOpen=!0,this.modalOpen.emit(),this.setupFocusTrap(),setTimeout((()=>{this.lockBodyScroll(),this.determineScrollStatus()})),setTimeout((()=>{this.focusTrap?.activate(),this.handleAutoFocus()}),200)}async close(a){this.closing||(this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.focusTrap?.deactivate(),this.isOpen=!1,this.modalClose.emit(),this.closing=!1}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}updateCustomFooterStatus(){this.hasCustomFooter=Boolean(this.el.querySelector('[slot="custom-footer"]'))}updateCustomHeaderStatus(){this.hasCustomHeader=Boolean(this.el.querySelector('[slot="custom-header"]'))}updateHeaderToolsStatus(){this.hasHeaderTools=Boolean(this.el.querySelector('[slot="header-tools"]'))}updateSecondaryContentStatus(){this.hasSecondaryContent=Boolean(this.el.querySelector('[slot="secondary-content"]'))}updateSidebarContentStatus(){this.hasSidebarContent=Boolean(this.el.querySelector('[slot="sidebar-content"]'))}updateSidebarFooterStatus(){this.hasSidebarFooter=Boolean(this.el.querySelector('[slot="sidebar-footer"]'))}handleAutoFocus(){this.modalEl.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){s(this.scrollContainer),s(this.sidebarScrollContainer)}setupFocusTrap(){this.focusTrap=l(this.modalEl,{allowOutsideClick:!0,setReturnFocus:n(),escapeDeactivates:!1,tabbableOptions:{getShadowRoot:a=>a.shadowRoot}})}unlockBodyScroll(){this.scrollContainer&&r(this.scrollContainer),this.sidebarScrollContainer&&r(this.sidebarScrollContainer)}render(){const a=Boolean(this.primaryActionLabel)||Boolean(this.secondaryActionLabel),e=i("modal",`modal--variant-${this.variant}`,{"modal--closing":this.closing,"modal--fullscreen":this.isFullscreen,"modal--fullscreen-transitioning":this.isFullscreenTransitioning,"modal--has-custom-footer":this.hasCustomFooter,"modal--has-custom-header":this.hasCustomHeader,"modal--has-header-tools":this.hasHeaderTools,"modal--has-secondary-content":this.hasSecondaryContent&&!this.hideSecondaryContent,"modal--hide-label":this.hideLabel,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--hide-scrolled-header-border":this.hideScrolledHeaderBorder,"modal--scrolled-down":this.scrolledDown,"modal--hide-secondary-content-borders":this.hideSecondaryContentBorders,"modal--has-sidebar-content":this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-padded":this.sidebarPadded,"modal--has-sidebar-footer":this.hasSidebarFooter&&this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-footer-padded":this.sidebarFooterPadded,"modal--sidebar-scrolled":this.sidebarScrolled,"modal--sidebar-scrolled-down":this.sidebarScrolledDown,"modal--sidebar-scrollable":this.sidebarScrollable});return d(o,{key:"7c24fee5323e2df19dabcb9a5a91655f0f28d4a1"},d("section",{key:"4c30f0c893b6dbff9583c739793c877db7776d13","aria-hidden":String(!this.isOpen),"aria-label":this.label,"aria-modal":"true",class:e,onKeyDown:this.onKeyDown,role:"dialog",ref:a=>this.modalEl=a},d("div",{key:"9c54e0b2b50d584c7e1ee97f2228d3d7d9b3cdf8",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"ac2f5576bfbf714ba3a6bf1eda46c25d30237737",class:"modal__body",style:this.isFullscreen?{}:{"--swirl-modal-max-height":this.maxHeight,"--swirl-modal-height":this.height,minHeight:this.minHeight,maxWidth:this.maxWidth}},d("aside",{key:"8ef849f9a5e17ccceb7cff955e39bc28892dd28c",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"2352dc5cb17e549f064dcd5ed0abfb7d99fec9e3",class:i("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"004b9da5c81869306984a3aa87519ae452800fd1",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"69bde9ad0b480e9969e56c089c29117bf1f28d10",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"a6346c2c7fde58212c6f5097d5d70606c3183e1b",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"02bcee4978aa640ecbb3b4417cdb3e50291445cb",name:"sidebar-content"})),d("div",{key:"136c44311e48b3b88db6c642f245915656e59233",class:"modal__sidebar-footer"},d("slot",{key:"a5e8df9f9147b7da7fd96a7efb9b3f71d4075d45",name:"sidebar-footer"}))),d("div",{key:"bb0170d8b569589cb559fedadfb3a0723c618934",class:"modal__main-content"},d("header",{key:"ee87585b97d37bd9521a3efb97af9c24fea9d83e",class:"modal__custom-header"},d("slot",{key:"5ee6d3e095940d24906edb710a574a13d82566ec",name:"custom-header"})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"387bfdb294a2da6dca9126e19127548770d7e323",class:"modal__header"},d("div",{key:"4a54700cd7a2824447892206073af4f5dbec9451",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"d6c3c80fb0c2cdee570e987bcc290e6581246f74",class:"modal__close-button",hideLabel:!0,icon:"default"===this.variant?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),this.showFullscreenButton&&d("swirl-button",{key:"c3879455946bd91bf57c33fd8693fe0601933ead",class:"modal__fullscreen-button",hideLabel:!0,icon:this.isFullscreen?"<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>":"<swirl-icon-open-in-full></swirl-icon-open-in-full>",label:this.isFullscreen?this.fullscreenDisableButtonLabel:this.fullscreenEnableButtonLabel,onClick:this.onFullscreenButtonClick}),!this.hideLabel&&d("swirl-heading",{key:"d3b7a16db9e4feae042a90ae3d2d8505757205ff",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"3b55bc21765c6d3ed98cd7c8787fe69906164aeb",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"d417c7f1e060b64bc7be2b98bffd5a1d1d460c0a",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"36fc3cce5333dec26141a19ed94e16d0e536bd32",class:"modal__header-tools"},d("slot",{key:"36df33eb9c484e602ed9c5d245f50e4ebcbff514",name:"header-tools"})),d("div",{key:"3a1fd477b1d5b70291d163f3e0c2759fde8dd34c",class:"modal__content",onScroll:this.determineMainScrollStatus,ref:a=>this.scrollContainer=a},d("slot",{key:"cdd147f7e0320742091611b92ef5318065d6bd2f"}))),d("div",{key:"bafcb6677a0da44e76e56ca189a8dbf4afa1f573",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:Boolean(this.secondaryContentPadding)?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:Boolean(this.secondaryContentPaddingBlockEnd)?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:Boolean(this.secondaryContentPaddingBlockStart)?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:Boolean(this.secondaryContentPaddingInlineEnd)?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:Boolean(this.secondaryContentPaddingInlineStart)?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"c6061a71b7d66b3e204ff7c4f075ae4908c4cfae",name:"secondary-content"}))),d("div",{key:"d1501d2c4431b43d053a67e3fb99922dea905dcb",class:"modal__custom-footer"},d("slot",{key:"404cb5ab7559754b1944fbb675518afcfffcadfd",name:"custom-footer"})),a&&d("footer",{key:"f2cadd2076b5c180494935945894fd468e0c46ba",class:"modal__controls"},d("swirl-button-group",{key:"d24df43e386d5431f5df152c5840bd290dbb38fd",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"1cb65ccd7d85057820d2afb79e647f078d70a9c7",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"705ca5cf78b9d0f0c576288cf94f6d9208e66def",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return t(this)}};m.style=':host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden="true"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) +\n var(--swirl-modal-max-secondary-content-width)\n )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)\n )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,\n max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +\n var(--swirl-modal-max-secondary-content-width)\n )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}';export{m as swirl_modal}
|