@getflip/swirl-components 0.319.0 → 0.319.2
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 +9 -6
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-modal/swirl-modal.js +9 -6
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-modal.js +9 -6
- package/dist/esm/swirl-modal.entry.js +9 -6
- package/dist/swirl-components/p-41fa045f.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-6e605f61.entry.js +0 -1
package/components.json
CHANGED
|
@@ -117,6 +117,9 @@ const SwirlModal = class {
|
|
|
117
117
|
componentDidLoad() {
|
|
118
118
|
this.focusTrap = focusTrap_esm.createFocusTrap(this.modalEl, {
|
|
119
119
|
allowOutsideClick: true,
|
|
120
|
+
// We don't always close the modal when ESC is pressed. So we manage the
|
|
121
|
+
// deactivation of the focus trap manually.
|
|
122
|
+
escapeDeactivates: false,
|
|
120
123
|
tabbableOptions: {
|
|
121
124
|
getShadowRoot: (node) => {
|
|
122
125
|
return node.shadowRoot;
|
|
@@ -231,21 +234,21 @@ const SwirlModal = class {
|
|
|
231
234
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
232
235
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
233
236
|
});
|
|
234
|
-
return (index.h(index.Host, { key: '
|
|
237
|
+
return (index.h(index.Host, { key: '3a3366fb403f5722bf8f544426dc0e28a38baf5c' }, index.h("section", { key: '62cf4ed359569d7252c9516ee986ab8e873bb754', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { key: '80f26c8113995973f1984bb64d2ef0db6bc65d71', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '576ea88a03ebcf3c63711214f954131afc76edac', class: "modal__body", style: {
|
|
235
238
|
"--swirl-modal-max-height": this.maxHeight,
|
|
236
239
|
"--swirl-modal-height": this.height,
|
|
237
240
|
minHeight: this.minHeight,
|
|
238
241
|
maxWidth: this.maxWidth,
|
|
239
|
-
} }, index.h("aside", { key: '
|
|
242
|
+
} }, index.h("aside", { key: '4f7fb1ec21a4b715e2318c1a9f53882deb9e7ba8', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '87abcf300bfb125308856ac1b60ad0df28e99c27', class: "modal__sidebar-header" }, index.h("swirl-heading", { key: '81b6227d1085c4e7eb7c9f0cebfc18b3540f2e7c', as: "h3", class: "modal__sidebar-heading", level: 3, text: this.sidebarLabel }))), index.h("div", { key: 'f42abc8314b221af8f2dadeaa73d1de429e05177', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '643816994f91313553b11980182285394f8096f5', name: "sidebar-content" })), index.h("div", { key: '20f5780da70f923151617a35b60e2a8ae13136e2', class: "modal__sidebar-footer" }, index.h("slot", { key: 'de224373f052ecc0c7eea72e83e4c98e6dd23cf1', name: "sidebar-footer" }))), index.h("div", { key: 'dd23b1b51b5545af639e8f5ace2106614cb551bd', class: "modal__main-content" }, index.h("header", { key: 'd71937f4fbf87caaeac6e0722a0c4bea5829b029', class: "modal__custom-header" }, index.h("slot", { key: '45336edc346f4b5931c32f029c3072d2c813208b', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'b965f7be0bb9b2500abb3c338d3d9c1c58cc01bc', class: "modal__header" }, index.h("div", { key: 'ed69b19865ceb4e27759d3936ee3f58995b7f9d9', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '628e0e6b13c39b7d535b43de3ad9a9ec21517f8b', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
240
243
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
241
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '
|
|
244
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'c9ca1c39d3b8447aa73dbdead5d9fda0a4352c98', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'd5263228d3ddf9de25fe5ff38b4697ab9d8e418b', class: "modal__content-container", style: {
|
|
242
245
|
gap: this.contentGap
|
|
243
246
|
? `var(--s-space-${this.contentGap})`
|
|
244
247
|
: undefined,
|
|
245
|
-
} }, index.h("div", { key: '
|
|
248
|
+
} }, index.h("div", { key: 'f44850b03d1716bc29de23e606bfbbbf076a4993', class: "modal__primary-content", style: {
|
|
246
249
|
maxWidth: this.primaryContentMaxWidth,
|
|
247
250
|
flex: this.primaryContentFlex,
|
|
248
|
-
} }, index.h("div", { key: '
|
|
251
|
+
} }, index.h("div", { key: '2399661abddb5bfca0b6d7d14247421050fced42', class: "modal__header-tools" }, index.h("slot", { key: '810b31cd6deaa29a3e4e35cc7a43eea1f5b6aa6a', name: "header-tools" })), index.h("div", { key: 'ee7ad6321ce5af143d04d3593c5896a9350c69f8', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '51004f8664d52eaeafd8a704386b28e7ba4758d3' }))), index.h("div", { key: '64124ddb5d19bf945810dc5cc603e52febaf7598', class: "modal__secondary-content", style: {
|
|
249
252
|
maxWidth: this.secondaryContentMaxWidth,
|
|
250
253
|
flex: this.secondaryContentFlex,
|
|
251
254
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -263,7 +266,7 @@ const SwirlModal = class {
|
|
|
263
266
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
264
267
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
265
268
|
: undefined,
|
|
266
|
-
} }, index.h("slot", { key: '
|
|
269
|
+
} }, index.h("slot", { key: 'e1a3139d5eb54fc0b6446d17ea63a1efd5106378', name: "secondary-content" }))), index.h("div", { key: '0e671a3b4c808390af2a3840aa799be41fc03f90', class: "modal__custom-footer" }, index.h("slot", { key: '131a3cb5bc9ad8c9c001f057d55bc0eeec39264b', name: "custom-footer" })), showControls && (index.h("footer", { key: 'e4a15ee635125e219a8437ee86a4a1e35736edac', class: "modal__controls" }, index.h("swirl-button-group", { key: '0fd1929c805d700d0694e517984d03193de657a4', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: 'b0464799d74c4d8e6d98e5580a38a91be6432ac5', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '946a61eefefaa5a483e2de0e492dc3b741a38198', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
267
270
|
}
|
|
268
271
|
get el() { return index.getElement(this); }
|
|
269
272
|
};
|