@getflip/swirl-components 0.495.0 → 0.496.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components.json +1 -1
  2. package/dist/cjs/swirl-modal.cjs.entry.js +27 -27
  3. package/dist/collection/components/swirl-modal/swirl-modal.js +27 -27
  4. package/dist/components/swirl-modal.js +1 -1
  5. package/dist/esm/swirl-modal.entry.js +27 -27
  6. package/dist/swirl-components/p-34c09dc1.entry.js +1 -0
  7. package/dist/swirl-components/swirl-components.esm.js +1 -1
  8. package/package.json +1 -1
  9. package/dist/swirl-components/p-73e7a089.entry.js +0 -1
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2026-05-26T09:39:50",
2
+ "timestamp": "2026-05-29T11:55:03",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.43.1",
package/dist/cjs/swirl-modal.cjs.entry.js CHANGED
@@ -1,9 +1,9 @@
1
1
  'use strict';
2
2
 
3
3
  var index = require('./index-6VVVqdOB.js');
4
- var bodyScrollLock = require('./body-scroll-lock-DVYwmTS6.js');
5
4
  var index$1 = require('./index-DcAhLZUH.js');
6
5
  var index_esm = require('./index.esm-D5HbQDBa.js');
6
+ var bodyScrollLock = require('./body-scroll-lock-DVYwmTS6.js');
7
7
 
8
8
  const swirlModalCss = () => `:host{display:block}:host *{box-sizing:border-box}.modal{--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) max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) max(env(safe-area-inset-bottom), 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;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){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( var(--swirl-modal-max-width) + var(--swirl-modal-max-secondary-content-width) )}.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( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) )}@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);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);padding-top:env(safe-area-inset-top, 0);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, 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;min-width:0;flex-basis:100%;flex-grow:1;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;min-width:0;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;padding-bottom:env(safe-area-inset-bottom)}.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( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) + var(--swirl-modal-max-secondary-content-width) )}@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)}}`;
9
9
 
@@ -86,6 +86,24 @@ const SwirlModal = class {
86
86
  this.onSecondaryAction = (event) => {
87
87
  this.secondaryAction.emit(event);
88
88
  };
89
+ this.updateCustomFooterStatus = () => {
90
+ this.hasCustomFooter = Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'));
91
+ };
92
+ this.updateCustomHeaderStatus = () => {
93
+ this.hasCustomHeader = Boolean(this.el.querySelector(':scope > [slot="custom-header"]'));
94
+ };
95
+ this.updateHeaderToolsStatus = () => {
96
+ this.hasHeaderTools = Boolean(this.el.querySelector(':scope > [slot="header-tools"]'));
97
+ };
98
+ this.updateSecondaryContentStatus = () => {
99
+ this.hasSecondaryContent = Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'));
100
+ };
101
+ this.updateSidebarContentStatus = () => {
102
+ this.hasSidebarContent = Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'));
103
+ };
104
+ this.updateSidebarFooterStatus = () => {
105
+ this.hasSidebarFooter = Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'));
106
+ };
89
107
  this.determineScrollStatus = () => {
90
108
  this.determineMainScrollStatus();
91
109
  this.determineSidebarScrollStatus();
@@ -197,24 +215,6 @@ const SwirlModal = class {
197
215
  async getScrollContainer() {
198
216
  return this.scrollContainer;
199
217
  }
200
- updateCustomFooterStatus() {
201
- this.hasCustomFooter = Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'));
202
- }
203
- updateCustomHeaderStatus() {
204
- this.hasCustomHeader = Boolean(this.el.querySelector(':scope > [slot="custom-header"]'));
205
- }
206
- updateHeaderToolsStatus() {
207
- this.hasHeaderTools = Boolean(this.el.querySelector(':scope > [slot="header-tools"]'));
208
- }
209
- updateSecondaryContentStatus() {
210
- this.hasSecondaryContent = Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'));
211
- }
212
- updateSidebarContentStatus() {
213
- this.hasSidebarContent = Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'));
214
- }
215
- updateSidebarFooterStatus() {
216
- this.hasSidebarFooter = Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'));
217
- }
218
218
  handleAutoFocus() {
219
219
  this.el.querySelector("input[autofocus]")?.focus();
220
220
  }
@@ -293,29 +293,29 @@ const SwirlModal = class {
293
293
  "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
294
294
  "modal--sidebar-scrollable": this.sidebarScrollable,
295
295
  });
296
- return (index.h(index.Host, { key: '9c99a1cccb7d411ea04b401b3eceebd7474bd935' }, index.h("dialog", { key: '82e6e47ba454c0e969c018a5884049c327e8254a', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'aa94452a30517f179718703576c7519d11920712', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '4c4e8b067fdbeb0a341e5ab9991b891ffcf2a165', class: "modal__body", part: "modal__body", style: !this.isFullscreen
296
+ return (index.h(index.Host, { key: '235ba2ee580e93b3d7c05c9517f53e2c9d9b317b' }, index.h("dialog", { key: '06195a1250d1ec76a213d18d4aff315333dafa4f', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'c0c7711654dd47ee40be98d4d71a0050e57d0104', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'a7ac4b72a730a43f78e99485e03a8985818d1259', class: "modal__body", part: "modal__body", style: !this.isFullscreen
297
297
  ? {
298
298
  "--swirl-modal-max-height": this.maxHeight,
299
299
  "--swirl-modal-height": this.height,
300
300
  minHeight: this.minHeight,
301
301
  maxWidth: this.maxWidth,
302
302
  }
303
- : {} }, index.h("aside", { key: '8a414fea243f1e376132b5a170130ebad2a7759c', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '61faeb8f035f9d7b710ef664b380b782bf041a78', class: index$1.classnames("modal__sidebar-header", {
303
+ : {} }, index.h("aside", { key: 'ae176268b8e44be76b5aaddf20f42d86e0df6f14', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: 'b9ce10f97f9fe390f69c63d3b868809becff3c58', class: index$1.classnames("modal__sidebar-header", {
304
304
  "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
305
- }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '74becfec2c1429593b2f6488be4f6af64bad966e', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '5752f26f24ca410d6dfc037e01f46a16953e87dc', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '017bb26301393ba669e711fa3d5845607d975e2e', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: 'a19418570dcb58ef5c4ae679935946c315a3693b', name: "sidebar-content" })), index.h("div", { key: 'cf820d179b773580d575b0b2134d2a761c0d2c92', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '250f2fb25f5a285dfef440e29176de12d2d3e3b2', name: "sidebar-footer" }))), index.h("div", { key: '5a647add83c0f5148585d4cbc904837feab07f84', class: "modal__main-content" }, index.h("header", { key: 'e924751dc8ad3360cd5d51e1e9b10ed6a14002d4', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '250ed91a3e4804707f78274d875aa087ab8c33e0', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '8f0dc5d72b0bed382df6e999630658e66a48010a', class: "modal__header" }, index.h("div", { key: '88066abbf5b1fce58699bc40dc2c07e8087354ae', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '6d0d27163f63fc97b8a92bd0f2604d812eaad370', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
305
+ }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: 'c7c681c082124be9dab3ec2c2c17e56a69f8b3e3', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '5ebc9913b65146b68e516a932456c877d797a621', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '176c8d3ccc1632efcfba252da81a2a147e25e628', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '15d07e263c5d385052a898a62ed7950b9a8208b6', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), index.h("div", { key: '2e340bc417fe3379b7458856449dbf2eef48bd93', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '49f3b6e74ae64dfe527b43c11eb6e3dfeedd836e', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), index.h("div", { key: '1fe5484a69a90f8ff05bed39b0dfcd12fad33c5d', class: "modal__main-content" }, index.h("header", { key: '3c5ef663e3ae10368d7ebcbe2746b27d0a1f29c8', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '99adf53776d16cabfb580f95972f8e452647be47', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '1474c9d9301148e18897be3f749fd611e2db3fc6', class: "modal__header" }, index.h("div", { key: 'c0ee74ab0175854d85baf7eec3de1dc94f565927', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '5cea2e113e7e165801540123f16105845460c4e3', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
306
306
  ? "<swirl-icon-close></swirl-icon-close>"
307
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '94de7f81956580e9def04e73d0ac7ef7b6fb5b0f', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
307
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'da81235d8dc4b0a5244588fe5f9ee03e6fa2b9c5', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
308
308
  ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
309
309
  : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
310
310
  ? this.fullscreenDisableButtonLabel
311
- : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '1083cc5e1c834da6852d7bbaa00161a3e36355d0', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'fb3e3d662457c363bf4c72806c565721e023c63c', class: "modal__content-container", style: {
311
+ : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '7f05fdbfe1b8e7634586561a8d080dc97668536c', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '6acdaac2163d136e55315bcaa9220ab12a6bee58', class: "modal__content-container", style: {
312
312
  gap: this.contentGap
313
313
  ? `var(--s-space-${this.contentGap})`
314
314
  : undefined,
315
- } }, index.h("div", { key: 'ebfc870ea52e095a9af44f0ba3e0c7cda973bc62', class: "modal__primary-content", style: {
315
+ } }, index.h("div", { key: 'bd43ef07cec5df13a8d70bb0af319f61eae1e595', class: "modal__primary-content", style: {
316
316
  maxWidth: this.primaryContentMaxWidth,
317
317
  flex: this.primaryContentFlex,
318
- } }, index.h("div", { key: '58af43e7a54f080e0d7610aae77dcfec1476805d', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '2e0053549df321627fa4230a8bcfc4e3ff4f2ee2', name: "header-tools" })), index.h("div", { key: 'a8943696f1c9c72f0fabf5b52389792b50a8c838', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '0851752269b7d2555ee3bd4fc4e105a2b40807cf' }))), index.h("div", { key: '8760eaceb10dd10bbedaadb1ca44e98314b9b832', class: "modal__secondary-content", style: {
318
+ } }, index.h("div", { key: '9750e3ffa67b3ac120b8bd60697cb11153338289', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '785135c8d95bf051733679c1b31845e61afdcb5f', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), index.h("div", { key: '67cdd985ad485f99002dae40730fead75b472c08', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '82d6eb5397d2bb117eb1631487f6159e60c203fa' }))), index.h("div", { key: 'e999a5c0d75a44bb7ecd429ccd12ac1f4184e0fc', class: "modal__secondary-content", style: {
319
319
  maxWidth: this.secondaryContentMaxWidth,
320
320
  flex: this.secondaryContentFlex,
321
321
  padding: Boolean(this.secondaryContentPadding)
@@ -333,7 +333,7 @@ const SwirlModal = class {
333
333
  paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
334
334
  ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
335
335
  : undefined,
336
- } }, index.h("slot", { key: '212f9df747714dfc7b099f8982f31ebbc232e281', name: "secondary-content" }))), index.h("div", { key: 'd2862d5a427a0b2af2af9a9ea620fe9326c974d6', class: "modal__custom-footer" }, index.h("slot", { key: '0b09f499a514861f41a7997fcb53cb23f45944ab', name: "custom-footer" })), showControls && (index.h("footer", { key: '2bb7deedb5268b22bc8a31e8e57bdd73187fe8e7', class: "modal__controls" }, index.h("swirl-button-group", { key: '15185ca41e545989a18c3f5e41256198c945c95a', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: 'b8de59553ada51f4ed8666165429f1fe7c122ce3', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'cf88abdf3f08f4eeb68168726dcb1d045e524464', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
336
+ } }, index.h("slot", { key: '81e447ba93934636e8097a4ac7ba2056f1fa1c56', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), index.h("div", { key: 'f1a005cb75f166c264ed198fbda710cab2eae232', class: "modal__custom-footer" }, index.h("slot", { key: '28f03f0ad3772e7e9bcef5609f6b88dc6596c7a6', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (index.h("footer", { key: '22cd8831892104a0ae86f28d0313a9d80964d340', class: "modal__controls" }, index.h("swirl-button-group", { key: 'c25bac688b643fa95293fcaf58711146355e202b', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: 'f784dde613fb923c0bc8b261a4c6e0a2c99061e4', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '340f53d4b0a72fa25eb11052a4fee3196942691e', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
337
337
  }
338
338
  get el() { return index.getElement(this); }
339
339
  };
package/dist/collection/components/swirl-modal/swirl-modal.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Host, h, } from "@stencil/core";
2
- import { disableBodyScroll, enableBodyScroll } from "../../utils/body-scroll-lock";
3
2
  import classnames from "classnames";
4
3
  import { tabbable } from "tabbable";
4
+ import { disableBodyScroll, enableBodyScroll, } from "../../utils/body-scroll-lock";
5
5
  /**
6
6
  * @slot slot - Modal contents
7
7
  * @slot secondary-content - Secondary content
@@ -81,6 +81,24 @@ export class SwirlModal {
81
81
  this.onSecondaryAction = (event) => {
82
82
  this.secondaryAction.emit(event);
83
83
  };
84
+ this.updateCustomFooterStatus = () => {
85
+ this.hasCustomFooter = Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'));
86
+ };
87
+ this.updateCustomHeaderStatus = () => {
88
+ this.hasCustomHeader = Boolean(this.el.querySelector(':scope > [slot="custom-header"]'));
89
+ };
90
+ this.updateHeaderToolsStatus = () => {
91
+ this.hasHeaderTools = Boolean(this.el.querySelector(':scope > [slot="header-tools"]'));
92
+ };
93
+ this.updateSecondaryContentStatus = () => {
94
+ this.hasSecondaryContent = Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'));
95
+ };
96
+ this.updateSidebarContentStatus = () => {
97
+ this.hasSidebarContent = Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'));
98
+ };
99
+ this.updateSidebarFooterStatus = () => {
100
+ this.hasSidebarFooter = Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'));
101
+ };
84
102
  this.determineScrollStatus = () => {
85
103
  this.determineMainScrollStatus();
86
104
  this.determineSidebarScrollStatus();
@@ -192,24 +210,6 @@ export class SwirlModal {
192
210
  async getScrollContainer() {
193
211
  return this.scrollContainer;
194
212
  }
195
- updateCustomFooterStatus() {
196
- this.hasCustomFooter = Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'));
197
- }
198
- updateCustomHeaderStatus() {
199
- this.hasCustomHeader = Boolean(this.el.querySelector(':scope > [slot="custom-header"]'));
200
- }
201
- updateHeaderToolsStatus() {
202
- this.hasHeaderTools = Boolean(this.el.querySelector(':scope > [slot="header-tools"]'));
203
- }
204
- updateSecondaryContentStatus() {
205
- this.hasSecondaryContent = Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'));
206
- }
207
- updateSidebarContentStatus() {
208
- this.hasSidebarContent = Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'));
209
- }
210
- updateSidebarFooterStatus() {
211
- this.hasSidebarFooter = Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'));
212
- }
213
213
  handleAutoFocus() {
214
214
  this.el.querySelector("input[autofocus]")?.focus();
215
215
  }
@@ -288,29 +288,29 @@ export class SwirlModal {
288
288
  "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
289
289
  "modal--sidebar-scrollable": this.sidebarScrollable,
290
290
  });
291
- return (h(Host, { key: '9c99a1cccb7d411ea04b401b3eceebd7474bd935' }, h("dialog", { key: '82e6e47ba454c0e969c018a5884049c327e8254a', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'aa94452a30517f179718703576c7519d11920712', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '4c4e8b067fdbeb0a341e5ab9991b891ffcf2a165', class: "modal__body", part: "modal__body", style: !this.isFullscreen
291
+ return (h(Host, { key: '235ba2ee580e93b3d7c05c9517f53e2c9d9b317b' }, h("dialog", { key: '06195a1250d1ec76a213d18d4aff315333dafa4f', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'c0c7711654dd47ee40be98d4d71a0050e57d0104', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'a7ac4b72a730a43f78e99485e03a8985818d1259', class: "modal__body", part: "modal__body", style: !this.isFullscreen
292
292
  ? {
293
293
  "--swirl-modal-max-height": this.maxHeight,
294
294
  "--swirl-modal-height": this.height,
295
295
  minHeight: this.minHeight,
296
296
  maxWidth: this.maxWidth,
297
297
  }
298
- : {} }, h("aside", { key: '8a414fea243f1e376132b5a170130ebad2a7759c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '61faeb8f035f9d7b710ef664b380b782bf041a78', class: classnames("modal__sidebar-header", {
298
+ : {} }, h("aside", { key: 'ae176268b8e44be76b5aaddf20f42d86e0df6f14', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'b9ce10f97f9fe390f69c63d3b868809becff3c58', class: classnames("modal__sidebar-header", {
299
299
  "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
300
- }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '74becfec2c1429593b2f6488be4f6af64bad966e', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '5752f26f24ca410d6dfc037e01f46a16953e87dc', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '017bb26301393ba669e711fa3d5845607d975e2e', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'a19418570dcb58ef5c4ae679935946c315a3693b', name: "sidebar-content" })), h("div", { key: 'cf820d179b773580d575b0b2134d2a761c0d2c92', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '250f2fb25f5a285dfef440e29176de12d2d3e3b2', name: "sidebar-footer" }))), h("div", { key: '5a647add83c0f5148585d4cbc904837feab07f84', class: "modal__main-content" }, h("header", { key: 'e924751dc8ad3360cd5d51e1e9b10ed6a14002d4', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '250ed91a3e4804707f78274d875aa087ab8c33e0', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '8f0dc5d72b0bed382df6e999630658e66a48010a', class: "modal__header" }, h("div", { key: '88066abbf5b1fce58699bc40dc2c07e8087354ae', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '6d0d27163f63fc97b8a92bd0f2604d812eaad370', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
300
+ }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'c7c681c082124be9dab3ec2c2c17e56a69f8b3e3', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '5ebc9913b65146b68e516a932456c877d797a621', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '176c8d3ccc1632efcfba252da81a2a147e25e628', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '15d07e263c5d385052a898a62ed7950b9a8208b6', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), h("div", { key: '2e340bc417fe3379b7458856449dbf2eef48bd93', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '49f3b6e74ae64dfe527b43c11eb6e3dfeedd836e', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), h("div", { key: '1fe5484a69a90f8ff05bed39b0dfcd12fad33c5d', class: "modal__main-content" }, h("header", { key: '3c5ef663e3ae10368d7ebcbe2746b27d0a1f29c8', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '99adf53776d16cabfb580f95972f8e452647be47', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '1474c9d9301148e18897be3f749fd611e2db3fc6', class: "modal__header" }, h("div", { key: 'c0ee74ab0175854d85baf7eec3de1dc94f565927', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '5cea2e113e7e165801540123f16105845460c4e3', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
301
301
  ? "<swirl-icon-close></swirl-icon-close>"
302
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '94de7f81956580e9def04e73d0ac7ef7b6fb5b0f', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
302
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'da81235d8dc4b0a5244588fe5f9ee03e6fa2b9c5', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
303
303
  ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
304
304
  : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
305
305
  ? this.fullscreenDisableButtonLabel
306
- : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '1083cc5e1c834da6852d7bbaa00161a3e36355d0', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'fb3e3d662457c363bf4c72806c565721e023c63c', class: "modal__content-container", style: {
306
+ : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '7f05fdbfe1b8e7634586561a8d080dc97668536c', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '6acdaac2163d136e55315bcaa9220ab12a6bee58', class: "modal__content-container", style: {
307
307
  gap: this.contentGap
308
308
  ? `var(--s-space-${this.contentGap})`
309
309
  : undefined,
310
- } }, h("div", { key: 'ebfc870ea52e095a9af44f0ba3e0c7cda973bc62', class: "modal__primary-content", style: {
310
+ } }, h("div", { key: 'bd43ef07cec5df13a8d70bb0af319f61eae1e595', class: "modal__primary-content", style: {
311
311
  maxWidth: this.primaryContentMaxWidth,
312
312
  flex: this.primaryContentFlex,
313
- } }, h("div", { key: '58af43e7a54f080e0d7610aae77dcfec1476805d', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '2e0053549df321627fa4230a8bcfc4e3ff4f2ee2', name: "header-tools" })), h("div", { key: 'a8943696f1c9c72f0fabf5b52389792b50a8c838', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '0851752269b7d2555ee3bd4fc4e105a2b40807cf' }))), h("div", { key: '8760eaceb10dd10bbedaadb1ca44e98314b9b832', class: "modal__secondary-content", style: {
313
+ } }, h("div", { key: '9750e3ffa67b3ac120b8bd60697cb11153338289', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '785135c8d95bf051733679c1b31845e61afdcb5f', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), h("div", { key: '67cdd985ad485f99002dae40730fead75b472c08', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '82d6eb5397d2bb117eb1631487f6159e60c203fa' }))), h("div", { key: 'e999a5c0d75a44bb7ecd429ccd12ac1f4184e0fc', class: "modal__secondary-content", style: {
314
314
  maxWidth: this.secondaryContentMaxWidth,
315
315
  flex: this.secondaryContentFlex,
316
316
  padding: Boolean(this.secondaryContentPadding)
@@ -328,7 +328,7 @@ export class SwirlModal {
328
328
  paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
329
329
  ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
330
330
  : undefined,
331
- } }, h("slot", { key: '212f9df747714dfc7b099f8982f31ebbc232e281', name: "secondary-content" }))), h("div", { key: 'd2862d5a427a0b2af2af9a9ea620fe9326c974d6', class: "modal__custom-footer" }, h("slot", { key: '0b09f499a514861f41a7997fcb53cb23f45944ab', name: "custom-footer" })), showControls && (h("footer", { key: '2bb7deedb5268b22bc8a31e8e57bdd73187fe8e7', class: "modal__controls" }, h("swirl-button-group", { key: '15185ca41e545989a18c3f5e41256198c945c95a', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'b8de59553ada51f4ed8666165429f1fe7c122ce3', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'cf88abdf3f08f4eeb68168726dcb1d045e524464', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
331
+ } }, h("slot", { key: '81e447ba93934636e8097a4ac7ba2056f1fa1c56', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), h("div", { key: 'f1a005cb75f166c264ed198fbda710cab2eae232', class: "modal__custom-footer" }, h("slot", { key: '28f03f0ad3772e7e9bcef5609f6b88dc6596c7a6', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (h("footer", { key: '22cd8831892104a0ae86f28d0313a9d80964d340', class: "modal__controls" }, h("swirl-button-group", { key: 'c25bac688b643fa95293fcaf58711146355e202b', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'f784dde613fb923c0bc8b261a4c6e0a2c99061e4', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '340f53d4b0a72fa25eb11052a4fee3196942691e', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
332
332
  }
333
333
  static get is() { return "swirl-modal"; }
334
334
  static get encapsulation() { return "shadow"; }
package/dist/components/swirl-modal.js CHANGED
@@ -1 +1 @@
1
- import{proxyCustomElement as a,HTMLElement as e,createEvent as o,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{d as i,e as r}from"./body-scroll-lock.js";import{c as l}from"./index2.js";import{t as n}from"./index.esm.js";import{d as h}from"./swirl-button2.js";import{d as m}from"./swirl-button-group2.js";import{d as c}from"./swirl-heading2.js";import{d as b}from"./swirl-stack2.js";const f=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=o(this,"toggleFullscreen",3),this.modalClose=o(this,"modalClose",3),this.modalOpen=o(this,"modalOpen",3),this.primaryAction=o(this,"primaryAction",3),this.requestModalClose=o(this,"requestModalClose",3),this.secondaryAction=o(this,"secondaryAction",3),this.sidebarClose=o(this,"sidebarClose",3),this.toggleDialog=o(this,"toggleDialog",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.opening=!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(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const e={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(e):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:e}))},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,o=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),e!==this.scrolledDown&&(this.scrolledDown=e),o!==this.scrollable&&(this.scrollable=o)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,e=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,o=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),e!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=e),o!==this.sidebarScrollable&&(this.sidebarScrollable=o)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}updateCustomFooterStatus(){this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')}updateCustomHeaderStatus(){this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')}updateHeaderToolsStatus(){this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')}updateSecondaryContentStatus(){this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')}updateSidebarContentStatus(){this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')}updateSidebarFooterStatus(){this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){i(this.scrollContainer),i(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&n(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&r(this.scrollContainer),this.sidebarScrollContainer&&r(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const e="string"==typeof a?document.querySelector(a):a,o=n(e,{includeContainer:!0,getShadowRoot:!0});o.length>0&&o[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,e=l("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(t,{key:"9c99a1cccb7d411ea04b401b3eceebd7474bd935"},d("dialog",{key:"82e6e47ba454c0e969c018a5884049c327e8254a","aria-label":this.label,class:e,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"aa94452a30517f179718703576c7519d11920712",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"4c4e8b067fdbeb0a341e5ab9991b891ffcf2a165",class:"modal__body",part:"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:"8a414fea243f1e376132b5a170130ebad2a7759c",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"61faeb8f035f9d7b710ef664b380b782bf041a78",class:l("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"74becfec2c1429593b2f6488be4f6af64bad966e",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"5752f26f24ca410d6dfc037e01f46a16953e87dc",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"017bb26301393ba669e711fa3d5845607d975e2e",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"a19418570dcb58ef5c4ae679935946c315a3693b",name:"sidebar-content"})),d("div",{key:"cf820d179b773580d575b0b2134d2a761c0d2c92",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"250f2fb25f5a285dfef440e29176de12d2d3e3b2",name:"sidebar-footer"}))),d("div",{key:"5a647add83c0f5148585d4cbc904837feab07f84",class:"modal__main-content"},d("header",{key:"e924751dc8ad3360cd5d51e1e9b10ed6a14002d4",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"250ed91a3e4804707f78274d875aa087ab8c33e0",name:"custom-header"})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"8f0dc5d72b0bed382df6e999630658e66a48010a",class:"modal__header"},d("div",{key:"88066abbf5b1fce58699bc40dc2c07e8087354ae",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"6d0d27163f63fc97b8a92bd0f2604d812eaad370",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:"94de7f81956580e9def04e73d0ac7ef7b6fb5b0f",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:"1083cc5e1c834da6852d7bbaa00161a3e36355d0",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"fb3e3d662457c363bf4c72806c565721e023c63c",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"ebfc870ea52e095a9af44f0ba3e0c7cda973bc62",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"58af43e7a54f080e0d7610aae77dcfec1476805d",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"2e0053549df321627fa4230a8bcfc4e3ff4f2ee2",name:"header-tools"})),d("div",{key:"a8943696f1c9c72f0fabf5b52389792b50a8c838",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"0851752269b7d2555ee3bd4fc4e105a2b40807cf"}))),d("div",{key:"8760eaceb10dd10bbedaadb1ca44e98314b9b832",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:this.secondaryContentPadding?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:this.secondaryContentPaddingBlockEnd?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:this.secondaryContentPaddingBlockStart?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:this.secondaryContentPaddingInlineEnd?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:this.secondaryContentPaddingInlineStart?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"212f9df747714dfc7b099f8982f31ebbc232e281",name:"secondary-content"}))),d("div",{key:"d2862d5a427a0b2af2af9a9ea620fe9326c974d6",class:"modal__custom-footer"},d("slot",{key:"0b09f499a514861f41a7997fcb53cb23f45944ab",name:"custom-footer"})),a&&d("footer",{key:"2bb7deedb5268b22bc8a31e8e57bdd73187fe8e7",class:"modal__controls"},d("swirl-button-group",{key:"15185ca41e545989a18c3f5e41256198c945c95a",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"b8de59553ada51f4ed8666165429f1fe7c122ce3",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"cf88abdf3f08f4eeb68168726dcb1d045e524464",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.modal{--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) max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) max(env(safe-area-inset-bottom), 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;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){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( var(--swirl-modal-max-width) + var(--swirl-modal-max-secondary-content-width) )}.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( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) )}@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);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);padding-top:env(safe-area-inset-top, 0);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, 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;min-width:0;flex-basis:100%;flex-grow:1;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;min-width:0;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;padding-bottom:env(safe-area-inset-bottom)}.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( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) + var(--swirl-modal-max-secondary-content-width) )}@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)}}"}},[257,"swirl-modal",{closable:[4],closeButtonLabel:[1,"close-button-label"],fullscreenEnableButtonLabel:[1,"fullscreen-enable-button-label"],fullscreenDisableButtonLabel:[1,"fullscreen-disable-button-label"],height:[1],hideCloseButton:[4,"hide-close-button"],hideLabel:[4,"hide-label"],label:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],padded:[4],primaryActionLabel:[1,"primary-action-label"],secondaryActionLabel:[1,"secondary-action-label"],variant:[1],contentGap:[1,"content-gap"],hideSecondaryContent:[4,"hide-secondary-content"],primaryContentMaxWidth:[1,"primary-content-max-width"],secondaryContentMaxWidth:[1,"secondary-content-max-width"],primaryContentFlex:[1,"primary-content-flex"],secondaryContentFlex:[1,"secondary-content-flex"],hideSecondaryContentBorders:[4,"hide-secondary-content-borders"],returnFocusTo:[1,"return-focus-to"],secondaryContentPadding:[1,"secondary-content-padding"],secondaryContentPaddingBlockEnd:[1,"secondary-content-padding-block-end"],secondaryContentPaddingBlockStart:[1,"secondary-content-padding-block-start"],secondaryContentPaddingInlineEnd:[1,"secondary-content-padding-inline-end"],secondaryContentPaddingInlineStart:[1,"secondary-content-padding-inline-start"],showFullscreenButton:[4,"show-fullscreen-button"],sidebarLabel:[1,"sidebar-label"],sidebarPadded:[4,"sidebar-padded"],sidebarFooterPadded:[4,"sidebar-footer-padded"],hideSidebarContent:[1028,"hide-sidebar-content"],hasSidebarCloseButton:[4,"has-sidebar-close-button"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],hideScrolledHeaderBorder:[4,"hide-scrolled-header-border"],opening:[32],isFullscreen:[32],isFullscreenTransitioning:[32],closing:[32],hasCustomHeader:[32],hasCustomFooter:[32],hasHeaderTools:[32],hasSecondaryContent:[32],scrollable:[32],scrolled:[32],scrolledDown:[32],hasSidebarContent:[32],hasSidebarFooter:[32],sidebarScrolled:[32],sidebarScrolledDown:[32],sidebarScrollable:[32],open:[64],close:[64],setFullscreen:[64],getScrollContainer:[64]},[[9,"resize","onWindowResize"]]]),p=f,u=function(){"undefined"!=typeof customElements&&["swirl-modal","swirl-button","swirl-button-group","swirl-heading","swirl-stack"].forEach((a=>{switch(a){case"swirl-modal":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-button":customElements.get(s(a))||h();break;case"swirl-button-group":customElements.get(s(a))||m();break;case"swirl-heading":customElements.get(s(a))||c();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,u as defineCustomElement}
1
+ import{proxyCustomElement as a,HTMLElement as e,createEvent as o,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{t as r}from"./index.esm.js";import{d as l,e as n}from"./body-scroll-lock.js";import{d as h}from"./swirl-button2.js";import{d as c}from"./swirl-button-group2.js";import{d as m}from"./swirl-heading2.js";import{d as b}from"./swirl-stack2.js";const f=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=o(this,"toggleFullscreen",3),this.modalClose=o(this,"modalClose",3),this.modalOpen=o(this,"modalOpen",3),this.primaryAction=o(this,"primaryAction",3),this.requestModalClose=o(this,"requestModalClose",3),this.secondaryAction=o(this,"secondaryAction",3),this.sidebarClose=o(this,"sidebarClose",3),this.toggleDialog=o(this,"toggleDialog",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.opening=!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(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const e={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(e):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:e}))},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.updateCustomFooterStatus=()=>{this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')},this.updateCustomHeaderStatus=()=>{this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')},this.updateHeaderToolsStatus=()=>{this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')},this.updateSecondaryContentStatus=()=>{this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')},this.updateSidebarContentStatus=()=>{this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')},this.updateSidebarFooterStatus=()=>{this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')},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,o=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),e!==this.scrolledDown&&(this.scrolledDown=e),o!==this.scrollable&&(this.scrollable=o)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,e=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,o=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),e!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=e),o!==this.sidebarScrollable&&(this.sidebarScrollable=o)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){l(this.scrollContainer),l(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&r(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&n(this.scrollContainer),this.sidebarScrollContainer&&n(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const e="string"==typeof a?document.querySelector(a):a,o=r(e,{includeContainer:!0,getShadowRoot:!0});o.length>0&&o[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!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(t,{key:"235ba2ee580e93b3d7c05c9517f53e2c9d9b317b"},d("dialog",{key:"06195a1250d1ec76a213d18d4aff315333dafa4f","aria-label":this.label,class:e,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"c0c7711654dd47ee40be98d4d71a0050e57d0104",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"a7ac4b72a730a43f78e99485e03a8985818d1259",class:"modal__body",part:"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:"ae176268b8e44be76b5aaddf20f42d86e0df6f14",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"b9ce10f97f9fe390f69c63d3b868809becff3c58",class:i("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"c7c681c082124be9dab3ec2c2c17e56a69f8b3e3",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"5ebc9913b65146b68e516a932456c877d797a621",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"176c8d3ccc1632efcfba252da81a2a147e25e628",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"15d07e263c5d385052a898a62ed7950b9a8208b6",name:"sidebar-content",onSlotchange:this.updateSidebarContentStatus})),d("div",{key:"2e340bc417fe3379b7458856449dbf2eef48bd93",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"49f3b6e74ae64dfe527b43c11eb6e3dfeedd836e",name:"sidebar-footer",onSlotchange:this.updateSidebarFooterStatus}))),d("div",{key:"1fe5484a69a90f8ff05bed39b0dfcd12fad33c5d",class:"modal__main-content"},d("header",{key:"3c5ef663e3ae10368d7ebcbe2746b27d0a1f29c8",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"99adf53776d16cabfb580f95972f8e452647be47",name:"custom-header",onSlotchange:this.updateCustomHeaderStatus})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"1474c9d9301148e18897be3f749fd611e2db3fc6",class:"modal__header"},d("div",{key:"c0ee74ab0175854d85baf7eec3de1dc94f565927",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"5cea2e113e7e165801540123f16105845460c4e3",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:"da81235d8dc4b0a5244588fe5f9ee03e6fa2b9c5",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:"7f05fdbfe1b8e7634586561a8d080dc97668536c",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"6acdaac2163d136e55315bcaa9220ab12a6bee58",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"bd43ef07cec5df13a8d70bb0af319f61eae1e595",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"9750e3ffa67b3ac120b8bd60697cb11153338289",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"785135c8d95bf051733679c1b31845e61afdcb5f",name:"header-tools",onSlotchange:this.updateHeaderToolsStatus})),d("div",{key:"67cdd985ad485f99002dae40730fead75b472c08",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"82d6eb5397d2bb117eb1631487f6159e60c203fa"}))),d("div",{key:"e999a5c0d75a44bb7ecd429ccd12ac1f4184e0fc",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:this.secondaryContentPadding?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:this.secondaryContentPaddingBlockEnd?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:this.secondaryContentPaddingBlockStart?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:this.secondaryContentPaddingInlineEnd?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:this.secondaryContentPaddingInlineStart?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"81e447ba93934636e8097a4ac7ba2056f1fa1c56",name:"secondary-content",onSlotchange:this.updateSecondaryContentStatus}))),d("div",{key:"f1a005cb75f166c264ed198fbda710cab2eae232",class:"modal__custom-footer"},d("slot",{key:"28f03f0ad3772e7e9bcef5609f6b88dc6596c7a6",name:"custom-footer",onSlotchange:this.updateCustomFooterStatus})),a&&d("footer",{key:"22cd8831892104a0ae86f28d0313a9d80964d340",class:"modal__controls"},d("swirl-button-group",{key:"c25bac688b643fa95293fcaf58711146355e202b",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"f784dde613fb923c0bc8b261a4c6e0a2c99061e4",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"340f53d4b0a72fa25eb11052a4fee3196942691e",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.modal{--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) max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) max(env(safe-area-inset-bottom), 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;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){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( var(--swirl-modal-max-width) + var(--swirl-modal-max-secondary-content-width) )}.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( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) )}@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);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);padding-top:env(safe-area-inset-top, 0);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, 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;min-width:0;flex-basis:100%;flex-grow:1;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;min-width:0;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;padding-bottom:env(safe-area-inset-bottom)}.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( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) + var(--swirl-modal-max-secondary-content-width) )}@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)}}"}},[257,"swirl-modal",{closable:[4],closeButtonLabel:[1,"close-button-label"],fullscreenEnableButtonLabel:[1,"fullscreen-enable-button-label"],fullscreenDisableButtonLabel:[1,"fullscreen-disable-button-label"],height:[1],hideCloseButton:[4,"hide-close-button"],hideLabel:[4,"hide-label"],label:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],padded:[4],primaryActionLabel:[1,"primary-action-label"],secondaryActionLabel:[1,"secondary-action-label"],variant:[1],contentGap:[1,"content-gap"],hideSecondaryContent:[4,"hide-secondary-content"],primaryContentMaxWidth:[1,"primary-content-max-width"],secondaryContentMaxWidth:[1,"secondary-content-max-width"],primaryContentFlex:[1,"primary-content-flex"],secondaryContentFlex:[1,"secondary-content-flex"],hideSecondaryContentBorders:[4,"hide-secondary-content-borders"],returnFocusTo:[1,"return-focus-to"],secondaryContentPadding:[1,"secondary-content-padding"],secondaryContentPaddingBlockEnd:[1,"secondary-content-padding-block-end"],secondaryContentPaddingBlockStart:[1,"secondary-content-padding-block-start"],secondaryContentPaddingInlineEnd:[1,"secondary-content-padding-inline-end"],secondaryContentPaddingInlineStart:[1,"secondary-content-padding-inline-start"],showFullscreenButton:[4,"show-fullscreen-button"],sidebarLabel:[1,"sidebar-label"],sidebarPadded:[4,"sidebar-padded"],sidebarFooterPadded:[4,"sidebar-footer-padded"],hideSidebarContent:[1028,"hide-sidebar-content"],hasSidebarCloseButton:[4,"has-sidebar-close-button"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],hideScrolledHeaderBorder:[4,"hide-scrolled-header-border"],opening:[32],isFullscreen:[32],isFullscreenTransitioning:[32],closing:[32],hasCustomHeader:[32],hasCustomFooter:[32],hasHeaderTools:[32],hasSecondaryContent:[32],scrollable:[32],scrolled:[32],scrolledDown:[32],hasSidebarContent:[32],hasSidebarFooter:[32],sidebarScrolled:[32],sidebarScrolledDown:[32],sidebarScrollable:[32],open:[64],close:[64],setFullscreen:[64],getScrollContainer:[64]},[[9,"resize","onWindowResize"]]]),p=f,_=function(){"undefined"!=typeof customElements&&["swirl-modal","swirl-button","swirl-button-group","swirl-heading","swirl-stack"].forEach((a=>{switch(a){case"swirl-modal":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-button":customElements.get(s(a))||h();break;case"swirl-button-group":customElements.get(s(a))||c();break;case"swirl-heading":customElements.get(s(a))||m();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,_ as defineCustomElement}
package/dist/esm/swirl-modal.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-CEYoWaAq.js';
2
- import { d as disableBodyScroll, e as enableBodyScroll } from './body-scroll-lock-BkJDOYVb.js';
3
2
  import { c as classnames } from './index-orsBiyT_.js';
4
3
  import { t as tabbable } from './index.esm-DBTxpXCn.js';
4
+ import { d as disableBodyScroll, e as enableBodyScroll } from './body-scroll-lock-BkJDOYVb.js';
5
5
 
6
6
  const swirlModalCss = () => `:host{display:block}:host *{box-sizing:border-box}.modal{--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) max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) max(env(safe-area-inset-bottom), 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;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){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( var(--swirl-modal-max-width) + var(--swirl-modal-max-secondary-content-width) )}.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( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) )}@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);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);padding-top:env(safe-area-inset-top, 0);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, 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;min-width:0;flex-basis:100%;flex-grow:1;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;min-width:0;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;padding-bottom:env(safe-area-inset-bottom)}.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( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) + var(--swirl-modal-max-secondary-content-width) )}@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)}}`;
7
7
 
@@ -84,6 +84,24 @@ const SwirlModal = class {
84
84
  this.onSecondaryAction = (event) => {
85
85
  this.secondaryAction.emit(event);
86
86
  };
87
+ this.updateCustomFooterStatus = () => {
88
+ this.hasCustomFooter = Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'));
89
+ };
90
+ this.updateCustomHeaderStatus = () => {
91
+ this.hasCustomHeader = Boolean(this.el.querySelector(':scope > [slot="custom-header"]'));
92
+ };
93
+ this.updateHeaderToolsStatus = () => {
94
+ this.hasHeaderTools = Boolean(this.el.querySelector(':scope > [slot="header-tools"]'));
95
+ };
96
+ this.updateSecondaryContentStatus = () => {
97
+ this.hasSecondaryContent = Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'));
98
+ };
99
+ this.updateSidebarContentStatus = () => {
100
+ this.hasSidebarContent = Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'));
101
+ };
102
+ this.updateSidebarFooterStatus = () => {
103
+ this.hasSidebarFooter = Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'));
104
+ };
87
105
  this.determineScrollStatus = () => {
88
106
  this.determineMainScrollStatus();
89
107
  this.determineSidebarScrollStatus();
@@ -195,24 +213,6 @@ const SwirlModal = class {
195
213
  async getScrollContainer() {
196
214
  return this.scrollContainer;
197
215
  }
198
- updateCustomFooterStatus() {
199
- this.hasCustomFooter = Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'));
200
- }
201
- updateCustomHeaderStatus() {
202
- this.hasCustomHeader = Boolean(this.el.querySelector(':scope > [slot="custom-header"]'));
203
- }
204
- updateHeaderToolsStatus() {
205
- this.hasHeaderTools = Boolean(this.el.querySelector(':scope > [slot="header-tools"]'));
206
- }
207
- updateSecondaryContentStatus() {
208
- this.hasSecondaryContent = Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'));
209
- }
210
- updateSidebarContentStatus() {
211
- this.hasSidebarContent = Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'));
212
- }
213
- updateSidebarFooterStatus() {
214
- this.hasSidebarFooter = Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'));
215
- }
216
216
  handleAutoFocus() {
217
217
  this.el.querySelector("input[autofocus]")?.focus();
218
218
  }
@@ -291,29 +291,29 @@ const SwirlModal = class {
291
291
  "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
292
292
  "modal--sidebar-scrollable": this.sidebarScrollable,
293
293
  });
294
- return (h(Host, { key: '9c99a1cccb7d411ea04b401b3eceebd7474bd935' }, h("dialog", { key: '82e6e47ba454c0e969c018a5884049c327e8254a', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'aa94452a30517f179718703576c7519d11920712', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '4c4e8b067fdbeb0a341e5ab9991b891ffcf2a165', class: "modal__body", part: "modal__body", style: !this.isFullscreen
294
+ return (h(Host, { key: '235ba2ee580e93b3d7c05c9517f53e2c9d9b317b' }, h("dialog", { key: '06195a1250d1ec76a213d18d4aff315333dafa4f', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'c0c7711654dd47ee40be98d4d71a0050e57d0104', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'a7ac4b72a730a43f78e99485e03a8985818d1259', class: "modal__body", part: "modal__body", style: !this.isFullscreen
295
295
  ? {
296
296
  "--swirl-modal-max-height": this.maxHeight,
297
297
  "--swirl-modal-height": this.height,
298
298
  minHeight: this.minHeight,
299
299
  maxWidth: this.maxWidth,
300
300
  }
301
- : {} }, h("aside", { key: '8a414fea243f1e376132b5a170130ebad2a7759c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '61faeb8f035f9d7b710ef664b380b782bf041a78', class: classnames("modal__sidebar-header", {
301
+ : {} }, h("aside", { key: 'ae176268b8e44be76b5aaddf20f42d86e0df6f14', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'b9ce10f97f9fe390f69c63d3b868809becff3c58', class: classnames("modal__sidebar-header", {
302
302
  "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
303
- }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '74becfec2c1429593b2f6488be4f6af64bad966e', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '5752f26f24ca410d6dfc037e01f46a16953e87dc', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '017bb26301393ba669e711fa3d5845607d975e2e', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'a19418570dcb58ef5c4ae679935946c315a3693b', name: "sidebar-content" })), h("div", { key: 'cf820d179b773580d575b0b2134d2a761c0d2c92', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '250f2fb25f5a285dfef440e29176de12d2d3e3b2', name: "sidebar-footer" }))), h("div", { key: '5a647add83c0f5148585d4cbc904837feab07f84', class: "modal__main-content" }, h("header", { key: 'e924751dc8ad3360cd5d51e1e9b10ed6a14002d4', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '250ed91a3e4804707f78274d875aa087ab8c33e0', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '8f0dc5d72b0bed382df6e999630658e66a48010a', class: "modal__header" }, h("div", { key: '88066abbf5b1fce58699bc40dc2c07e8087354ae', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '6d0d27163f63fc97b8a92bd0f2604d812eaad370', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
303
+ }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'c7c681c082124be9dab3ec2c2c17e56a69f8b3e3', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '5ebc9913b65146b68e516a932456c877d797a621', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '176c8d3ccc1632efcfba252da81a2a147e25e628', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '15d07e263c5d385052a898a62ed7950b9a8208b6', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), h("div", { key: '2e340bc417fe3379b7458856449dbf2eef48bd93', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '49f3b6e74ae64dfe527b43c11eb6e3dfeedd836e', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), h("div", { key: '1fe5484a69a90f8ff05bed39b0dfcd12fad33c5d', class: "modal__main-content" }, h("header", { key: '3c5ef663e3ae10368d7ebcbe2746b27d0a1f29c8', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '99adf53776d16cabfb580f95972f8e452647be47', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '1474c9d9301148e18897be3f749fd611e2db3fc6', class: "modal__header" }, h("div", { key: 'c0ee74ab0175854d85baf7eec3de1dc94f565927', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '5cea2e113e7e165801540123f16105845460c4e3', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
304
304
  ? "<swirl-icon-close></swirl-icon-close>"
305
- : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '94de7f81956580e9def04e73d0ac7ef7b6fb5b0f', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
305
+ : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'da81235d8dc4b0a5244588fe5f9ee03e6fa2b9c5', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
306
306
  ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
307
307
  : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
308
308
  ? this.fullscreenDisableButtonLabel
309
- : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '1083cc5e1c834da6852d7bbaa00161a3e36355d0', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'fb3e3d662457c363bf4c72806c565721e023c63c', class: "modal__content-container", style: {
309
+ : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '7f05fdbfe1b8e7634586561a8d080dc97668536c', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '6acdaac2163d136e55315bcaa9220ab12a6bee58', class: "modal__content-container", style: {
310
310
  gap: this.contentGap
311
311
  ? `var(--s-space-${this.contentGap})`
312
312
  : undefined,
313
- } }, h("div", { key: 'ebfc870ea52e095a9af44f0ba3e0c7cda973bc62', class: "modal__primary-content", style: {
313
+ } }, h("div", { key: 'bd43ef07cec5df13a8d70bb0af319f61eae1e595', class: "modal__primary-content", style: {
314
314
  maxWidth: this.primaryContentMaxWidth,
315
315
  flex: this.primaryContentFlex,
316
- } }, h("div", { key: '58af43e7a54f080e0d7610aae77dcfec1476805d', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '2e0053549df321627fa4230a8bcfc4e3ff4f2ee2', name: "header-tools" })), h("div", { key: 'a8943696f1c9c72f0fabf5b52389792b50a8c838', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '0851752269b7d2555ee3bd4fc4e105a2b40807cf' }))), h("div", { key: '8760eaceb10dd10bbedaadb1ca44e98314b9b832', class: "modal__secondary-content", style: {
316
+ } }, h("div", { key: '9750e3ffa67b3ac120b8bd60697cb11153338289', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '785135c8d95bf051733679c1b31845e61afdcb5f', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), h("div", { key: '67cdd985ad485f99002dae40730fead75b472c08', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '82d6eb5397d2bb117eb1631487f6159e60c203fa' }))), h("div", { key: 'e999a5c0d75a44bb7ecd429ccd12ac1f4184e0fc', class: "modal__secondary-content", style: {
317
317
  maxWidth: this.secondaryContentMaxWidth,
318
318
  flex: this.secondaryContentFlex,
319
319
  padding: Boolean(this.secondaryContentPadding)
@@ -331,7 +331,7 @@ const SwirlModal = class {
331
331
  paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
332
332
  ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
333
333
  : undefined,
334
- } }, h("slot", { key: '212f9df747714dfc7b099f8982f31ebbc232e281', name: "secondary-content" }))), h("div", { key: 'd2862d5a427a0b2af2af9a9ea620fe9326c974d6', class: "modal__custom-footer" }, h("slot", { key: '0b09f499a514861f41a7997fcb53cb23f45944ab', name: "custom-footer" })), showControls && (h("footer", { key: '2bb7deedb5268b22bc8a31e8e57bdd73187fe8e7', class: "modal__controls" }, h("swirl-button-group", { key: '15185ca41e545989a18c3f5e41256198c945c95a', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'b8de59553ada51f4ed8666165429f1fe7c122ce3', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'cf88abdf3f08f4eeb68168726dcb1d045e524464', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
334
+ } }, h("slot", { key: '81e447ba93934636e8097a4ac7ba2056f1fa1c56', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), h("div", { key: 'f1a005cb75f166c264ed198fbda710cab2eae232', class: "modal__custom-footer" }, h("slot", { key: '28f03f0ad3772e7e9bcef5609f6b88dc6596c7a6', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (h("footer", { key: '22cd8831892104a0ae86f28d0313a9d80964d340', class: "modal__controls" }, h("swirl-button-group", { key: 'c25bac688b643fa95293fcaf58711146355e202b', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'f784dde613fb923c0bc8b261a4c6e0a2c99061e4', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '340f53d4b0a72fa25eb11052a4fee3196942691e', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
335
335
  }
336
336
  get el() { return getElement(this); }
337
337
  };