@getflip/swirl-components 0.456.1 → 0.456.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +1 -1
- package/dist/cjs/swirl-dialog.cjs.entry.js +15 -3
- package/dist/cjs/swirl-modal.cjs.entry.js +22 -10
- package/dist/cjs/swirl-toast-provider.cjs.entry.js +2 -1
- package/dist/collection/components/swirl-dialog/swirl-dialog.js +15 -3
- package/dist/collection/components/swirl-modal/swirl-modal.js +22 -10
- package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js +2 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-dialog.js +1 -1
- package/dist/components/swirl-modal.js +1 -1
- package/dist/components/swirl-toast-provider.js +1 -1
- package/dist/esm/swirl-dialog.entry.js +15 -3
- package/dist/esm/swirl-modal.entry.js +22 -10
- package/dist/esm/swirl-toast-provider.entry.js +2 -1
- package/dist/swirl-components/p-17e720d6.entry.js +1 -0
- package/dist/swirl-components/{p-617835a6.entry.js → p-2270f422.entry.js} +1 -1
- package/dist/swirl-components/p-48009167.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-3edd2000.entry.js +0 -1
- package/dist/swirl-components/p-d43a17fb.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as i,H as a,c as e,h as t,d as o,t as s}from"./p-BIzYxcO0.js";import{c as d}from"./p-CTIzk_ki.js";import{t as n}from"./p-DBTxpXCn.js";import{d as l}from"./p-DWVJBU8l.js";const r=i(class extends a{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.dialogClose=e(this,"dialogClose",7),this.dialogOpen=e(this,"dialogOpen",7),this.primaryAction=e(this,"primaryAction",7),this.secondaryAction=e(this,"secondaryAction",7),this.toggleDialog=e(this,"toggleDialog",7),this.intent="primary",this.closing=!1,this.opening=!1,this.onClose=()=>{this.closing=!1,this.dialogClose.emit()},this.onToggle=i=>{
|
|
1
|
+
import{p as i,H as a,c as e,h as t,d as o,t as s}from"./p-BIzYxcO0.js";import{c as d}from"./p-CTIzk_ki.js";import{t as n}from"./p-DBTxpXCn.js";import{d as l}from"./p-DWVJBU8l.js";const r=i(class extends a{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.dialogClose=e(this,"dialogClose",7),this.dialogOpen=e(this,"dialogOpen",7),this.primaryAction=e(this,"primaryAction",7),this.secondaryAction=e(this,"secondaryAction",7),this.toggleDialog=e(this,"toggleDialog",7),this.intent="primary",this.closing=!1,this.opening=!1,this.onClose=()=>{this.closing=!1,this.dialogClose.emit()},this.onToggle=i=>{const a={newState:i.newState,dialog:this.dialogEl};this.el.isConnected?this.toggleDialog.emit(a):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:a}))},this.onKeyDown=i=>{"Escape"===i.code&&(i.stopImmediatePropagation(),i.preventDefault(),this.close())},this.onBackdropClick=()=>{this.close()},this.onPrimaryAction=i=>{this.primaryAction.emit(i),this.close()},this.onSecondaryAction=i=>{this.secondaryAction.emit(i),this.close()}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps()}disconnectedCallback(){this.dialogEl?.open&&this.dialogEl.close()}ensureOpening(){this.opening&&!this.dialogEl?.open&&this.open()}setDialogCustomProps(){this.dialogEl.setAttribute("closedby","none")}async open(i){this.opening=!0,this.temporaryReturnFocusTo=i,this.dialogEl&&(this.dialogEl.showModal(),this.dialogOpen.emit())}async close(){this.closing||(this.closing=!0,setTimeout((()=>{this.dialogEl.close(),this.customFocusReturn()}),150))}customFocusReturn(){const i=this.temporaryReturnFocusTo??this.returnFocusTo;if(!i)return;const a="string"==typeof i?document.querySelector(i):i,e=n(a,{includeContainer:!0,getShadowRoot:!0});e.length>0&&e[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const i=d("dialog",{"dialog--closing":this.closing}),a=!!this.el.querySelector('[slot="left-controls"]');return t(o,{key:"aed27fd60b073318b2bd447fbdea62b28a27b2bb"},t("dialog",{key:"717b703063cc4f7dc4d6ebd0cb4e32cdd41fc6da","aria-describedby":"content","aria-labelledby":this.hideLabel?void 0:"label","aria-label":this.hideLabel?this.label:void 0,class:i,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,role:"alertdialog",ref:i=>this.dialogEl=i},t("div",{key:"11cff9977346162bc0e379a2c6b12860efa9756e",class:"dialog__backdrop",onClick:this.onBackdropClick}),t("div",{key:"c537c3eaeb2688e7829163f1bb855f803fbd22b2",class:"dialog__body",part:"dialog__body",role:"document"},!this.hideLabel&&t("h2",{key:"b673f936615fff1714137c5e3a0047e153103e2d",class:"dialog__heading",part:"dialog__heading",id:"label"},this.label),t("div",{key:"6078b644042f60e89dfe55debeb8aad6a80bed34",class:"dialog__content",part:"dialog__content",id:"content"},t("slot",{key:"708bb8495998e1b91cebf23c4aba27d6225bdbe6"})),t("div",{key:"b47c30c0db1a42257dd198a985fd3c26bcad4094",class:"dialog__controls"},a&&t("div",{key:"bc4cdcd98a8e57faa1f182ff8a85b261e7757c22",class:"dialog__left_controls"},t("slot",{key:"c3fc5d235a740e1bbd5e8e5b19fb5901188f82d2",name:"left-controls"})),this.secondaryActionLabel&&t("swirl-button",{key:"f728634b91e50864b1179267da1d465efae28f2a",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&t("swirl-button",{key:"87f838d8b11dfa270ba12c02a981b855029cf69c",intent:this.intent,label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.dialog{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.dialog::backdrop{display:none}.dialog:not([open]){display:none}.dialog:not(.dialog--closing) .dialog__backdrop{animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{animation:none}}.dialog:not(.dialog--closing) .dialog__body{animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{animation:none}}.dialog--closing{animation:0.15s dialog-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-16);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__body{width:25rem;border-radius:var(--s-border-radius-base)}}@media (min-width: 992px){.dialog__body{text-align:start}}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);padding-right:var(--s-space-8);padding-left:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__heading{line-height:var(--s-line-height-base)}}.dialog__content{margin-bottom:var(--s-space-20);padding-right:var(--s-space-8);padding-left:var(--s-space-8);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px){.dialog__content{margin-bottom:var(--s-space-24)}}.dialog__controls{display:flex;flex-wrap:wrap;justify-content:stretch;gap:var(--s-space-8)}.dialog__controls>*{flex-grow:1}@media (min-width: 992px){.dialog__controls>*{flex-grow:0}}@media (min-width: 992px){.dialog__controls{flex-wrap:nowrap;justify-content:flex-end}}.dialog__left_controls{display:flex;align-items:center;flex-grow:1;padding-left:var(--s-space-8);width:100%;min-width:0}@media (min-width: 992px){.dialog__left_controls{width:auto}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}"}},[257,"swirl-dialog",{hideLabel:[4,"hide-label"],intent:[1],label:[1],primaryActionLabel:[1,"primary-action-label"],returnFocusTo:[1,"return-focus-to"],secondaryActionLabel:[1,"secondary-action-label"],closing:[32],opening:[32],open:[64],close:[64]}]),c=r,h=function(){"undefined"!=typeof customElements&&["swirl-dialog","swirl-button"].forEach((i=>{switch(i){case"swirl-dialog":customElements.get(s(i))||customElements.define(s(i),r);break;case"swirl-button":customElements.get(s(i))||l()}}))};export{c as SwirlDialog,h as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as a,H as e,c as o,h as d,d as t,t as s}from"./p-BIzYxcO0.js";import{d as r,e as i}from"./p-B0kNlhKL.js";import{c as l}from"./p-CTIzk_ki.js";import{t as n}from"./p-DBTxpXCn.js";import{d as c}from"./p-DWVJBU8l.js";import{d as h}from"./p-DCxwPw77.js";import{d as m}from"./p-BGAf4PfC.js";import{d as b}from"./p-BGcNhzCf.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=>{this.toggleDialog.emit({newState:a.newState,dialog:this.modalEl})},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(){r(this.scrollContainer),r(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&n(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&i(this.scrollContainer),this.sidebarScrollContainer&&i(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:"ffca3ffde40ee2ce12c5bbae16cf666469e5cec8"},d("dialog",{key:"ecf5e73246420f8b8b01450e1c5765aaf42029b2","aria-label":this.label,class:e,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"1fa3c62f075b0bfd6d3ca30774253a61c4934175",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"7f9796e4d8e8af5c0642c241b06dcf5fec6223ab",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:"da6414275c53f69e0aa79143d9ef55c9aa1e1ce4",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"90594916619a30a8d3318497a66598294f748ce5",class:l("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"ca826c3c1afc1e97159cbb8ec8943b450435abfe",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"e0ead4e5b5bf1c35c03c96b93498a103b3e634f0",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"5f2a7ed53bec01ffed40a3d131b64c2e03d83929",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"d42fb0ec47381a6cd6ec477850dc582a240598cb",name:"sidebar-content"})),d("div",{key:"268cccb52c4afe9de83e941176517d09cab3b306",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"ea18767a28bd3d8f821e34278e498c3403afa1be",name:"sidebar-footer"}))),d("div",{key:"fbd5a891ba267af682054a898b30cd0fa1689c18",class:"modal__main-content"},d("header",{key:"283ba37d75bf5e08b8b7d84a514d7a3c7c160adf",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"e444b9b98fd57062354667c46d465ff80bea19f8",name:"custom-header"})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"65b824cc9c1251b0b943ed445f2e891aee96a847",class:"modal__header"},d("div",{key:"5677c86d1514e5f9fceaad9af8e5c406ff9f900e",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"753dc28b4f3534d9df68097fa7a9d263b387e8e4",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:"e0a43c835df0c35c10f36fd068a3152c1ab79677",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:"1717002304eb94bf92d1642b75df8838701472ea",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"b5c2a8e8c1fc583b3f4e2182b411654e9c386646",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"5c5f2a732234d756dbcf28f58cb8238c9487142b",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"3901c89bda375d71d00ca6e24dee56f7f45c98a8",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"8de5d5da42a3e007d6edae7a064d3df8f9fccd95",name:"header-tools"})),d("div",{key:"9c60ea7160de25efff272e5e18031a7ca0b0a57f",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"b68ea6b8779f3a307a140af6d9b7d7b67310b27c"}))),d("div",{key:"2fd76e1672b9689c257967947f5729ef93cee781",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:"905cd5eadd346c30baa9599fd4af3736675a9fcc",name:"secondary-content"}))),d("div",{key:"b08a927b677ee0ddfcd226d3d67360099f98fa48",class:"modal__custom-footer"},d("slot",{key:"53e74812ea012fd42cfa679863381bc2f8428777",name:"custom-footer"})),a&&d("footer",{key:"dc2b4cdf5d8001d1f58f39e617c17694e476f4c3",class:"modal__controls"},d("swirl-button-group",{key:"b4892f3291e0c11f493734f175349f282aad6093",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"99a31bbc0ea13d07588e24470e1153d7cbf09543",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"142fd942653ae6ab5cf1fc78bf38c2fc9fb1b319",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-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var( --s-surface-overlay-default );--swirl-resource-list-item-background-hovered:var( --s-surface-overlay-hovered );--swirl-resource-list-item-background-pressed:var( --s-surface-overlay-pressed );--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) var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) 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);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out, 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}.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))||c();break;case"swirl-button-group":customElements.get(s(a))||h();break;case"swirl-heading":customElements.get(s(a))||m();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,u as defineCustomElement}
|
|
1
|
+
import{p as a,H as e,c as o,h as d,d as t,t as s}from"./p-BIzYxcO0.js";import{d as r,e as i}from"./p-B0kNlhKL.js";import{c as l}from"./p-CTIzk_ki.js";import{t as n}from"./p-DBTxpXCn.js";import{d as h}from"./p-DWVJBU8l.js";import{d as c}from"./p-DCxwPw77.js";import{d as m}from"./p-BGAf4PfC.js";import{d as b}from"./p-BGcNhzCf.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(){r(this.scrollContainer),r(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&n(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&i(this.scrollContainer),this.sidebarScrollContainer&&i(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:"5d7e303e02d067ed79ee08245beeb3505b23d0c8"},d("dialog",{key:"499c2d3cf4d1db9c814fbd08de35103c653d8f53","aria-label":this.label,class:e,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"fdafa4289dc0e7b1c52f7aba9a78e59e5461b4c3",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"d32e5cf93fd3527fa8959a07c489809bf3b5d524",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:"e0d0d96518649aca453d6ae1859d63c7476d0a16",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"7ddd6756a831afdf032390da6252810050118818",class:l("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"512cebb0e33e605045841149b23a20242f32cb1f",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"c644af6fa65c441cb5561dbaf524b52887132501",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"4195cc1058fc42910fbf2827fa62315391870d69",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"621611853e79dd708997fbd79b2378a0e76f5560",name:"sidebar-content"})),d("div",{key:"8c2639486b76993821009975a0cffceb619ff665",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"51bbc2dff3eebdd9ad2ffbd67c6f97f192d5a1b8",name:"sidebar-footer"}))),d("div",{key:"2ce672d9d91a657d900cb7b467c67d1141d25af2",class:"modal__main-content"},d("header",{key:"1deb15b62f8d97fcfc2dcff227a1c4f7810e96c1",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"971bab2b2bf9702423a0029e1377c92f27031216",name:"custom-header"})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"f79ba8354749823c6ecff8d16a69a0692bc91116",class:"modal__header"},d("div",{key:"5a782f2522d504b3159ad4dd16169ba559985c4d",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"d5ce47698af572d9c496e57166d2fd7758ba2501",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:"12158b9b8e9e198d50f9bfe1966d0647fc4c8d42",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:"eb66384e6bdd0591720155f875d7c8113d47bf40",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"cc0c0a5b1f8eadbf37e2ba0876481a68fbb213c2",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"4a540785ad16b194d2bf912c987854ef0aefaeb8",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"95f7eb2354c5449b18f432a07c4912491ed701ab",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"1d60b63d1000042a1448ee0244ccbd31d42bf8a2",name:"header-tools"})),d("div",{key:"4d16d27052062e70f03fa81bc01bbfea0c0805ba",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"05d0c4d3a5430691ca9e5074db7ef3e3ad37e03d"}))),d("div",{key:"78deb8ecfbacb2577219ee0859a45a5da7f93d8b",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:"cd72bf9a5874503c9bc7b17733b6fbe84ce6cae4",name:"secondary-content"}))),d("div",{key:"0ca496f691300e9fbc4ee6a6b867b6501c1f292a",class:"modal__custom-footer"},d("slot",{key:"e428f004ed058339b520198f110064e625f8e03b",name:"custom-footer"})),a&&d("footer",{key:"d457989e84d2e354abd444f27458dab14021cb8b",class:"modal__controls"},d("swirl-button-group",{key:"74b3bba2bb32d70f080de8f7e212385805fc1a49",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"7fcfe9e269a81e0fcb9039a52071878c58951a78",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"da1cb3c478d8f0d8bf41c4e6adfd76d2e16966ec",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-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var( --s-surface-overlay-default );--swirl-resource-list-item-background-hovered:var( --s-surface-overlay-hovered );--swirl-resource-list-item-background-pressed:var( --s-surface-overlay-pressed );--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) var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) 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);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out, 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}.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))||c();break;case"swirl-heading":customElements.get(s(a))||m();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,u as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as s,h as i,d as o,t as e}from"./p-BIzYxcO0.js";import{d as a}from"./p-DWVJBU8l.js";import{d as n}from"./p-Cz9YHhEr.js";import{d as r}from"./p-BGcNhzCf.js";import{d as c}from"./p-DUOOPGWB.js";const h=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toasts=[],this.activeDialogStack=[],this.originalParent=null,this.onAction=t=>{const s=this.toasts.find((({toastId:s})=>s===t.detail));s&&(s.onAction?.(s.toastId),s.dismissOnAction&&this.dismiss(t.detail))},this.onDismiss=t=>{this.dismiss(t.detail)}}async clearAll(){this.toasts=[]}async dismiss(t){const s=this.toasts.find((s=>t===s.toastId));s&&(s.onDismiss?.(s.toastId),this.toasts=[...this.toasts].filter((s=>s.toastId!==t)))}async toast(t){if(this.toasts.some((s=>s.toastId===t.toastId)))return;const s={...t,createdAt:new Date,duration:t.duration||this.globalDuration||void 0,toastId:t.toastId||Math.round(1e4*Math.random())+""};return this.toasts=[...this.toasts,s],s}componentWillLoad(){this.originalParent=this.el.parentElement}disconnectedCallback(){this.el.isConnected||(this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected)),this.ensureCorrectPosition())}handleDialogToggle(t){const{newState:s,dialog:i}=t.detail;"open"===s?this.onDialogOpen(i):this.onDialogClose(i)}onToastsChange(){this.toasts.length>0?this.ensureCorrectPosition():this.popoverEl.hidePopover()}onDialogOpen(t){this.activeDialogStack.includes(t)||this.activeDialogStack.push(t),this.toasts.length>0&&this.ensureCorrectPosition()}onDialogClose(t){this.activeDialogStack=this.activeDialogStack.filter((s=>s!=t)),this.toasts.length>0&&this.ensureCorrectPosition()}ensureCorrectPosition(){const t=this.activeDialogStack[this.activeDialogStack.length-1]||this.originalParent;this.el.parentElement!==t&&t.appendChild(this.el),this.popoverEl.hidePopover(),this.popoverEl.showPopover()}render(){return i(o,{key:"
|
|
1
|
+
import{p as t,H as s,h as i,d as o,t as e}from"./p-BIzYxcO0.js";import{d as a}from"./p-DWVJBU8l.js";import{d as n}from"./p-Cz9YHhEr.js";import{d as r}from"./p-BGcNhzCf.js";import{d as c}from"./p-DUOOPGWB.js";const h=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toasts=[],this.activeDialogStack=[],this.originalParent=null,this.onAction=t=>{const s=this.toasts.find((({toastId:s})=>s===t.detail));s&&(s.onAction?.(s.toastId),s.dismissOnAction&&this.dismiss(t.detail))},this.onDismiss=t=>{this.dismiss(t.detail)}}async clearAll(){this.toasts=[]}async dismiss(t){const s=this.toasts.find((s=>t===s.toastId));s&&(s.onDismiss?.(s.toastId),this.toasts=[...this.toasts].filter((s=>s.toastId!==t)))}async toast(t){if(this.toasts.some((s=>s.toastId===t.toastId)))return;const s={...t,createdAt:new Date,duration:t.duration||this.globalDuration||void 0,toastId:t.toastId||Math.round(1e4*Math.random())+""};return this.toasts=[...this.toasts,s],s}componentWillLoad(){this.originalParent=this.el.parentElement}disconnectedCallback(){this.el.isConnected||(this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected)),this.ensureCorrectPosition())}handleDialogToggle(t){const{newState:s,dialog:i}=t.detail;"open"===s?this.onDialogOpen(i):this.onDialogClose(i)}onToastsChange(){this.toasts.length>0?this.ensureCorrectPosition():this.popoverEl.hidePopover()}onDialogOpen(t){this.activeDialogStack.includes(t)||this.activeDialogStack.push(t),this.toasts.length>0&&this.ensureCorrectPosition()}onDialogClose(t){this.activeDialogStack=this.activeDialogStack.filter((s=>s!=t)),this.toasts.length>0&&this.ensureCorrectPosition()}ensureCorrectPosition(){this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected));const t=this.activeDialogStack[this.activeDialogStack.length-1]||this.originalParent;this.el.parentElement!==t&&t.appendChild(this.el),this.popoverEl.hidePopover(),this.popoverEl.showPopover()}render(){return i(o,{key:"b814bfac33e13fa660a10ec5d29f5f45fbac8f8d",role:"status"},i("swirl-stack",{key:"03972a88936dfd3697335295381889095f6fb3a8",class:"toast-provider__stack",part:"toast-provider__stack",popover:"manual",spacing:"12",align:"center",ref:t=>this.popoverEl=t},this.toasts.map((t=>{const s={...t,content:void 0,onDismiss:void 0,onAction:void 0};return i("swirl-toast",{key:t.toastId,...s,onDismiss:this.onDismiss,onAction:this.onAction},t.content)}))))}get el(){return this}static get watchers(){return{toasts:[{onToastsChange:0}]}}static get style(){return".toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}"}},[1,"swirl-toast-provider",{globalDuration:[2,"global-duration"],toasts:[32],clearAll:[64],dismiss:[64],toast:[64]},[[4,"toggleDialog","handleDialogToggle"]],{toasts:[{onToastsChange:0}]}]),l=h,d=function(){"undefined"!=typeof customElements&&["swirl-toast-provider","swirl-button","swirl-icon-close","swirl-stack","swirl-toast"].forEach((t=>{switch(t){case"swirl-toast-provider":customElements.get(e(t))||customElements.define(e(t),h);break;case"swirl-button":customElements.get(e(t))||a();break;case"swirl-icon-close":customElements.get(e(t))||n();break;case"swirl-stack":customElements.get(e(t))||r();break;case"swirl-toast":customElements.get(e(t))||c()}}))};export{l as SwirlToastProvider,d as defineCustomElement}
|
|
@@ -20,10 +20,22 @@ const SwirlDialog = class {
|
|
|
20
20
|
this.dialogClose.emit();
|
|
21
21
|
};
|
|
22
22
|
this.onToggle = (event) => {
|
|
23
|
-
|
|
23
|
+
const detail = {
|
|
24
24
|
newState: event.newState,
|
|
25
25
|
dialog: this.dialogEl,
|
|
26
|
-
}
|
|
26
|
+
};
|
|
27
|
+
if (this.el.isConnected) {
|
|
28
|
+
this.toggleDialog.emit(detail);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
// If the dialog is not connected to the DOM anymore, we dispatch
|
|
32
|
+
// a custom event to ensure the event is still emitted.
|
|
33
|
+
document.dispatchEvent(new CustomEvent("toggleDialog", {
|
|
34
|
+
bubbles: true,
|
|
35
|
+
composed: true,
|
|
36
|
+
detail,
|
|
37
|
+
}));
|
|
38
|
+
}
|
|
27
39
|
};
|
|
28
40
|
this.onKeyDown = (event) => {
|
|
29
41
|
if (event.code === "Escape") {
|
|
@@ -106,7 +118,7 @@ const SwirlDialog = class {
|
|
|
106
118
|
render() {
|
|
107
119
|
const className = classnames("dialog", { "dialog--closing": this.closing });
|
|
108
120
|
const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
|
|
109
|
-
return (h(Host, { key: '
|
|
121
|
+
return (h(Host, { key: 'aed27fd60b073318b2bd447fbdea62b28a27b2bb' }, h("dialog", { key: '717b703063cc4f7dc4d6ebd0cb4e32cdd41fc6da', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, h("div", { key: '11cff9977346162bc0e379a2c6b12860efa9756e', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'c537c3eaeb2688e7829163f1bb855f803fbd22b2', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'b673f936615fff1714137c5e3a0047e153103e2d', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '6078b644042f60e89dfe55debeb8aad6a80bed34', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '708bb8495998e1b91cebf23c4aba27d6225bdbe6' })), h("div", { key: 'b47c30c0db1a42257dd198a985fd3c26bcad4094', class: "dialog__controls" }, hasLeftControls && (h("div", { key: 'bc4cdcd98a8e57faa1f182ff8a85b261e7757c22', class: "dialog__left_controls" }, h("slot", { key: 'c3fc5d235a740e1bbd5e8e5b19fb5901188f82d2', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: 'f728634b91e50864b1179267da1d465efae28f2a', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '87f838d8b11dfa270ba12c02a981b855029cf69c', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
|
|
110
122
|
}
|
|
111
123
|
get el() { return getElement(this); }
|
|
112
124
|
};
|
|
@@ -48,10 +48,22 @@ const SwirlModal = class {
|
|
|
48
48
|
this.modalClose.emit();
|
|
49
49
|
};
|
|
50
50
|
this.onToggle = (event) => {
|
|
51
|
-
|
|
51
|
+
const detail = {
|
|
52
52
|
newState: event.newState,
|
|
53
53
|
dialog: this.modalEl,
|
|
54
|
-
}
|
|
54
|
+
};
|
|
55
|
+
if (this.el.isConnected) {
|
|
56
|
+
this.toggleDialog.emit(detail);
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
// If the dialog is not connected to the DOM anymore, we dispatch
|
|
60
|
+
// a custom event to ensure the event is still emitted.
|
|
61
|
+
document.dispatchEvent(new CustomEvent("toggleDialog", {
|
|
62
|
+
bubbles: true,
|
|
63
|
+
composed: true,
|
|
64
|
+
detail,
|
|
65
|
+
}));
|
|
66
|
+
}
|
|
55
67
|
};
|
|
56
68
|
this.onBackdropClick = () => {
|
|
57
69
|
this.close();
|
|
@@ -279,29 +291,29 @@ const SwirlModal = class {
|
|
|
279
291
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
280
292
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
281
293
|
});
|
|
282
|
-
return (h(Host, { key: '
|
|
294
|
+
return (h(Host, { key: '5d7e303e02d067ed79ee08245beeb3505b23d0c8' }, h("dialog", { key: '499c2d3cf4d1db9c814fbd08de35103c653d8f53', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'fdafa4289dc0e7b1c52f7aba9a78e59e5461b4c3', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'd32e5cf93fd3527fa8959a07c489809bf3b5d524', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
283
295
|
? {
|
|
284
296
|
"--swirl-modal-max-height": this.maxHeight,
|
|
285
297
|
"--swirl-modal-height": this.height,
|
|
286
298
|
minHeight: this.minHeight,
|
|
287
299
|
maxWidth: this.maxWidth,
|
|
288
300
|
}
|
|
289
|
-
: {} }, h("aside", { key: '
|
|
301
|
+
: {} }, h("aside", { key: 'e0d0d96518649aca453d6ae1859d63c7476d0a16', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '7ddd6756a831afdf032390da6252810050118818', class: classnames("modal__sidebar-header", {
|
|
290
302
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
291
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
303
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '512cebb0e33e605045841149b23a20242f32cb1f', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: 'c644af6fa65c441cb5561dbaf524b52887132501', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '4195cc1058fc42910fbf2827fa62315391870d69', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '621611853e79dd708997fbd79b2378a0e76f5560', name: "sidebar-content" })), h("div", { key: '8c2639486b76993821009975a0cffceb619ff665', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '51bbc2dff3eebdd9ad2ffbd67c6f97f192d5a1b8', name: "sidebar-footer" }))), h("div", { key: '2ce672d9d91a657d900cb7b467c67d1141d25af2', class: "modal__main-content" }, h("header", { key: '1deb15b62f8d97fcfc2dcff227a1c4f7810e96c1', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '971bab2b2bf9702423a0029e1377c92f27031216', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'f79ba8354749823c6ecff8d16a69a0692bc91116', class: "modal__header" }, h("div", { key: '5a782f2522d504b3159ad4dd16169ba559985c4d', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd5ce47698af572d9c496e57166d2fd7758ba2501', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
292
304
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
293
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
305
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '12158b9b8e9e198d50f9bfe1966d0647fc4c8d42', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
294
306
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
295
307
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
296
308
|
? this.fullscreenDisableButtonLabel
|
|
297
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
309
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'eb66384e6bdd0591720155f875d7c8113d47bf40', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'cc0c0a5b1f8eadbf37e2ba0876481a68fbb213c2', class: "modal__content-container", style: {
|
|
298
310
|
gap: this.contentGap
|
|
299
311
|
? `var(--s-space-${this.contentGap})`
|
|
300
312
|
: undefined,
|
|
301
|
-
} }, h("div", { key: '
|
|
313
|
+
} }, h("div", { key: '4a540785ad16b194d2bf912c987854ef0aefaeb8', class: "modal__primary-content", style: {
|
|
302
314
|
maxWidth: this.primaryContentMaxWidth,
|
|
303
315
|
flex: this.primaryContentFlex,
|
|
304
|
-
} }, h("div", { key: '
|
|
316
|
+
} }, h("div", { key: '95f7eb2354c5449b18f432a07c4912491ed701ab', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '1d60b63d1000042a1448ee0244ccbd31d42bf8a2', name: "header-tools" })), h("div", { key: '4d16d27052062e70f03fa81bc01bbfea0c0805ba', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '05d0c4d3a5430691ca9e5074db7ef3e3ad37e03d' }))), h("div", { key: '78deb8ecfbacb2577219ee0859a45a5da7f93d8b', class: "modal__secondary-content", style: {
|
|
305
317
|
maxWidth: this.secondaryContentMaxWidth,
|
|
306
318
|
flex: this.secondaryContentFlex,
|
|
307
319
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -319,7 +331,7 @@ const SwirlModal = class {
|
|
|
319
331
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
320
332
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
321
333
|
: undefined,
|
|
322
|
-
} }, h("slot", { key: '
|
|
334
|
+
} }, h("slot", { key: 'cd72bf9a5874503c9bc7b17733b6fbe84ce6cae4', name: "secondary-content" }))), h("div", { key: '0ca496f691300e9fbc4ee6a6b867b6501c1f292a', class: "modal__custom-footer" }, h("slot", { key: 'e428f004ed058339b520198f110064e625f8e03b', name: "custom-footer" })), showControls && (h("footer", { key: 'd457989e84d2e354abd444f27458dab14021cb8b', class: "modal__controls" }, h("swirl-button-group", { key: '74b3bba2bb32d70f080de8f7e212385805fc1a49', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '7fcfe9e269a81e0fcb9039a52071878c58951a78', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'da1cb3c478d8f0d8bf41c4e6adfd76d2e16966ec', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
323
335
|
}
|
|
324
336
|
get el() { return getElement(this); }
|
|
325
337
|
};
|
|
@@ -109,6 +109,7 @@ const SwirlToastProvider = class {
|
|
|
109
109
|
* This is necessary to allow toasts to be interactable when a dialog is open, otherwise the toasts would be inert.
|
|
110
110
|
*/
|
|
111
111
|
ensureCorrectPosition() {
|
|
112
|
+
this.activeDialogStack = this.activeDialogStack.filter((dialog) => dialog.isConnected);
|
|
112
113
|
const parent = this.activeDialogStack[this.activeDialogStack.length - 1] ||
|
|
113
114
|
this.originalParent;
|
|
114
115
|
if (this.el.parentElement !== parent) {
|
|
@@ -118,7 +119,7 @@ const SwirlToastProvider = class {
|
|
|
118
119
|
this.popoverEl.showPopover();
|
|
119
120
|
}
|
|
120
121
|
render() {
|
|
121
|
-
return (h(Host, { key: '
|
|
122
|
+
return (h(Host, { key: 'b814bfac33e13fa660a10ec5d29f5f45fbac8f8d', role: "status" }, h("swirl-stack", { key: '03972a88936dfd3697335295381889095f6fb3a8', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
|
|
122
123
|
const props = {
|
|
123
124
|
...toast,
|
|
124
125
|
content: undefined,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,c as a,h as o,a as t,d as e}from"./p-bQirifsr.js";import{c as s}from"./p-orsBiyT_.js";import{t as d}from"./p-DBTxpXCn.js";const n=class{constructor(o){i(this,o),this.dialogClose=a(this,"dialogClose",7),this.dialogOpen=a(this,"dialogOpen",7),this.primaryAction=a(this,"primaryAction",7),this.secondaryAction=a(this,"secondaryAction",7),this.toggleDialog=a(this,"toggleDialog",7),this.intent="primary",this.closing=!1,this.opening=!1,this.onClose=()=>{this.closing=!1,this.dialogClose.emit()},this.onToggle=i=>{const a={newState:i.newState,dialog:this.dialogEl};this.el.isConnected?this.toggleDialog.emit(a):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:a}))},this.onKeyDown=i=>{"Escape"===i.code&&(i.stopImmediatePropagation(),i.preventDefault(),this.close())},this.onBackdropClick=()=>{this.close()},this.onPrimaryAction=i=>{this.primaryAction.emit(i),this.close()},this.onSecondaryAction=i=>{this.secondaryAction.emit(i),this.close()}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps()}disconnectedCallback(){this.dialogEl?.open&&this.dialogEl.close()}ensureOpening(){this.opening&&!this.dialogEl?.open&&this.open()}setDialogCustomProps(){this.dialogEl.setAttribute("closedby","none")}async open(i){this.opening=!0,this.temporaryReturnFocusTo=i,this.dialogEl&&(this.dialogEl.showModal(),this.dialogOpen.emit())}async close(){this.closing||(this.closing=!0,setTimeout((()=>{this.dialogEl.close(),this.customFocusReturn()}),150))}customFocusReturn(){const i=this.temporaryReturnFocusTo??this.returnFocusTo;if(!i)return;const a="string"==typeof i?document.querySelector(i):i,o=d(a,{includeContainer:!0,getShadowRoot:!0});o.length>0&&o[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const i=s("dialog",{"dialog--closing":this.closing}),a=Boolean(this.el.querySelector('[slot="left-controls"]'));return o(t,{key:"aed27fd60b073318b2bd447fbdea62b28a27b2bb"},o("dialog",{key:"717b703063cc4f7dc4d6ebd0cb4e32cdd41fc6da","aria-describedby":"content","aria-labelledby":this.hideLabel?void 0:"label","aria-label":this.hideLabel?this.label:void 0,class:i,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,role:"alertdialog",ref:i=>this.dialogEl=i},o("div",{key:"11cff9977346162bc0e379a2c6b12860efa9756e",class:"dialog__backdrop",onClick:this.onBackdropClick}),o("div",{key:"c537c3eaeb2688e7829163f1bb855f803fbd22b2",class:"dialog__body",part:"dialog__body",role:"document"},!this.hideLabel&&o("h2",{key:"b673f936615fff1714137c5e3a0047e153103e2d",class:"dialog__heading",part:"dialog__heading",id:"label"},this.label),o("div",{key:"6078b644042f60e89dfe55debeb8aad6a80bed34",class:"dialog__content",part:"dialog__content",id:"content"},o("slot",{key:"708bb8495998e1b91cebf23c4aba27d6225bdbe6"})),o("div",{key:"b47c30c0db1a42257dd198a985fd3c26bcad4094",class:"dialog__controls"},a&&o("div",{key:"bc4cdcd98a8e57faa1f182ff8a85b261e7757c22",class:"dialog__left_controls"},o("slot",{key:"c3fc5d235a740e1bbd5e8e5b19fb5901188f82d2",name:"left-controls"})),this.secondaryActionLabel&&o("swirl-button",{key:"f728634b91e50864b1179267da1d465efae28f2a",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&o("swirl-button",{key:"87f838d8b11dfa270ba12c02a981b855029cf69c",intent:this.intent,label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))}get el(){return e(this)}};n.style=":host{display:block}:host *{box-sizing:border-box}.dialog{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.dialog::backdrop{display:none}.dialog:not([open]){display:none}.dialog:not(.dialog--closing) .dialog__backdrop{animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{animation:none}}.dialog:not(.dialog--closing) .dialog__body{animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{animation:none}}.dialog--closing{animation:0.15s dialog-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-16);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__body{width:25rem;border-radius:var(--s-border-radius-base)}}@media (min-width: 992px){.dialog__body{text-align:start}}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);padding-right:var(--s-space-8);padding-left:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__heading{line-height:var(--s-line-height-base)}}.dialog__content{margin-bottom:var(--s-space-20);padding-right:var(--s-space-8);padding-left:var(--s-space-8);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px){.dialog__content{margin-bottom:var(--s-space-24)}}.dialog__controls{display:flex;flex-wrap:wrap;justify-content:stretch;gap:var(--s-space-8)}.dialog__controls>*{flex-grow:1}@media (min-width: 992px){.dialog__controls>*{flex-grow:0}}@media (min-width: 992px){.dialog__controls{flex-wrap:nowrap;justify-content:flex-end}}.dialog__left_controls{display:flex;align-items:center;flex-grow:1;padding-left:var(--s-space-8);width:100%;min-width:0}@media (min-width: 992px){.dialog__left_controls{width:auto}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";export{n as swirl_dialog}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as s,a as i,d as o}from"./p-bQirifsr.js";const a=class{constructor(s){t(this,s),this.toasts=[],this.activeDialogStack=[],this.originalParent=null,this.onAction=t=>{const s=this.toasts.find((({toastId:s})=>s===t.detail));s&&(s.onAction?.(s.toastId),s.dismissOnAction&&this.dismiss(t.detail))},this.onDismiss=t=>{this.dismiss(t.detail)}}async clearAll(){this.toasts=[]}async dismiss(t){const s=this.toasts.find((s=>t===s.toastId));s&&(s.onDismiss?.(s.toastId),this.toasts=[...this.toasts].filter((s=>s.toastId!==t)))}async toast(t){if(this.toasts.some((s=>s.toastId===t.toastId)))return;const s={...t,createdAt:new Date,duration:t.duration||this.globalDuration||void 0,toastId:t.toastId||String(Math.round(1e4*Math.random()))};return this.toasts=[...this.toasts,s],s}componentWillLoad(){this.originalParent=this.el.parentElement}disconnectedCallback(){this.el.isConnected||(this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected)),this.ensureCorrectPosition())}handleDialogToggle(t){const{newState:s,dialog:i}=t.detail;"open"===s?this.onDialogOpen(i):this.onDialogClose(i)}onToastsChange(){this.toasts.length>0?this.ensureCorrectPosition():this.popoverEl.hidePopover()}onDialogOpen(t){this.activeDialogStack.includes(t)||this.activeDialogStack.push(t),this.toasts.length>0&&this.ensureCorrectPosition()}onDialogClose(t){this.activeDialogStack=this.activeDialogStack.filter((s=>s!=t)),this.toasts.length>0&&this.ensureCorrectPosition()}ensureCorrectPosition(){const t=this.activeDialogStack[this.activeDialogStack.length-1]||this.originalParent;this.el.parentElement!==t&&t.appendChild(this.el),this.popoverEl.hidePopover(),this.popoverEl.showPopover()}render(){return s(i,{key:"
|
|
1
|
+
import{r as t,h as s,a as i,d as o}from"./p-bQirifsr.js";const a=class{constructor(s){t(this,s),this.toasts=[],this.activeDialogStack=[],this.originalParent=null,this.onAction=t=>{const s=this.toasts.find((({toastId:s})=>s===t.detail));s&&(s.onAction?.(s.toastId),s.dismissOnAction&&this.dismiss(t.detail))},this.onDismiss=t=>{this.dismiss(t.detail)}}async clearAll(){this.toasts=[]}async dismiss(t){const s=this.toasts.find((s=>t===s.toastId));s&&(s.onDismiss?.(s.toastId),this.toasts=[...this.toasts].filter((s=>s.toastId!==t)))}async toast(t){if(this.toasts.some((s=>s.toastId===t.toastId)))return;const s={...t,createdAt:new Date,duration:t.duration||this.globalDuration||void 0,toastId:t.toastId||String(Math.round(1e4*Math.random()))};return this.toasts=[...this.toasts,s],s}componentWillLoad(){this.originalParent=this.el.parentElement}disconnectedCallback(){this.el.isConnected||(this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected)),this.ensureCorrectPosition())}handleDialogToggle(t){const{newState:s,dialog:i}=t.detail;"open"===s?this.onDialogOpen(i):this.onDialogClose(i)}onToastsChange(){this.toasts.length>0?this.ensureCorrectPosition():this.popoverEl.hidePopover()}onDialogOpen(t){this.activeDialogStack.includes(t)||this.activeDialogStack.push(t),this.toasts.length>0&&this.ensureCorrectPosition()}onDialogClose(t){this.activeDialogStack=this.activeDialogStack.filter((s=>s!=t)),this.toasts.length>0&&this.ensureCorrectPosition()}ensureCorrectPosition(){this.activeDialogStack=this.activeDialogStack.filter((t=>t.isConnected));const t=this.activeDialogStack[this.activeDialogStack.length-1]||this.originalParent;this.el.parentElement!==t&&t.appendChild(this.el),this.popoverEl.hidePopover(),this.popoverEl.showPopover()}render(){return s(i,{key:"b814bfac33e13fa660a10ec5d29f5f45fbac8f8d",role:"status"},s("swirl-stack",{key:"03972a88936dfd3697335295381889095f6fb3a8",class:"toast-provider__stack",part:"toast-provider__stack",popover:"manual",spacing:"12",align:"center",ref:t=>this.popoverEl=t},this.toasts.map((t=>{const i={...t,content:void 0,onDismiss:void 0,onAction:void 0};return s("swirl-toast",{key:t.toastId,...i,onDismiss:this.onDismiss,onAction:this.onAction},t.content)}))))}get el(){return o(this)}static get watchers(){return{toasts:[{onToastsChange:0}]}}};a.style=".toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}";export{a as swirl_toast_provider}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,c as o,h as e,a as d,d as t}from"./p-bQirifsr.js";import{d as s,e as i}from"./p-B0kNlhKL.js";import{c as r}from"./p-orsBiyT_.js";import{t as l}from"./p-DBTxpXCn.js";const n=class{constructor(e){a(this,e),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 o={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(o):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:o}))},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,o=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,e=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),o!==this.scrolledDown&&(this.scrolledDown=o),e!==this.scrollable&&(this.scrollable=e)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,o=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,e=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),o!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=o),e!==this.sidebarScrollable&&(this.sidebarScrollable=e)}}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=Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'))}updateCustomHeaderStatus(){this.hasCustomHeader=Boolean(this.el.querySelector(':scope > [slot="custom-header"]'))}updateHeaderToolsStatus(){this.hasHeaderTools=Boolean(this.el.querySelector(':scope > [slot="header-tools"]'))}updateSecondaryContentStatus(){this.hasSecondaryContent=Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'))}updateSidebarContentStatus(){this.hasSidebarContent=Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'))}updateSidebarFooterStatus(){this.hasSidebarFooter=Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'))}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){s(this.scrollContainer),s(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&l(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&i(this.scrollContainer),this.sidebarScrollContainer&&i(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 o="string"==typeof a?document.querySelector(a):a,e=l(o,{includeContainer:!0,getShadowRoot:!0});e.length>0&&e[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=Boolean(this.primaryActionLabel)||Boolean(this.secondaryActionLabel),o=r("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 e(d,{key:"5d7e303e02d067ed79ee08245beeb3505b23d0c8"},e("dialog",{key:"499c2d3cf4d1db9c814fbd08de35103c653d8f53","aria-label":this.label,class:o,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},e("div",{key:"fdafa4289dc0e7b1c52f7aba9a78e59e5461b4c3",class:"modal__backdrop",onClick:this.onBackdropClick}),e("div",{key:"d32e5cf93fd3527fa8959a07c489809bf3b5d524",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}},e("aside",{key:"e0d0d96518649aca453d6ae1859d63c7476d0a16",class:"modal__sidebar"},this.sidebarLabel&&e("header",{key:"7ddd6756a831afdf032390da6252810050118818",class:r("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&e("swirl-button",{key:"512cebb0e33e605045841149b23a20242f32cb1f",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),e("swirl-heading",{key:"c644af6fa65c441cb5561dbaf524b52887132501",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),e("div",{key:"4195cc1058fc42910fbf2827fa62315391870d69",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},e("slot",{key:"621611853e79dd708997fbd79b2378a0e76f5560",name:"sidebar-content"})),e("div",{key:"8c2639486b76993821009975a0cffceb619ff665",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},e("slot",{key:"51bbc2dff3eebdd9ad2ffbd67c6f97f192d5a1b8",name:"sidebar-footer"}))),e("div",{key:"2ce672d9d91a657d900cb7b467c67d1141d25af2",class:"modal__main-content"},e("header",{key:"1deb15b62f8d97fcfc2dcff227a1c4f7810e96c1",class:"modal__custom-header",part:"modal__custom-header"},e("slot",{key:"971bab2b2bf9702423a0029e1377c92f27031216",name:"custom-header"})),(!this.hideLabel||!this.hideCloseButton)&&e("header",{key:"f79ba8354749823c6ecff8d16a69a0692bc91116",class:"modal__header"},e("div",{key:"5a782f2522d504b3159ad4dd16169ba559985c4d",class:"modal__header-bar"},!this.hideCloseButton&&e("swirl-button",{key:"d5ce47698af572d9c496e57166d2fd7758ba2501",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&&e("swirl-button",{key:"12158b9b8e9e198d50f9bfe1966d0647fc4c8d42",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&&e("swirl-heading",{key:"eb66384e6bdd0591720155f875d7c8113d47bf40",as:"h2",class:"modal__heading",level:3,text:this.label}))),e("div",{key:"cc0c0a5b1f8eadbf37e2ba0876481a68fbb213c2",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},e("div",{key:"4a540785ad16b194d2bf912c987854ef0aefaeb8",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},e("div",{key:"95f7eb2354c5449b18f432a07c4912491ed701ab",class:"modal__header-tools",part:"modal__header-tools"},e("slot",{key:"1d60b63d1000042a1448ee0244ccbd31d42bf8a2",name:"header-tools"})),e("div",{key:"4d16d27052062e70f03fa81bc01bbfea0c0805ba",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},e("slot",{key:"05d0c4d3a5430691ca9e5074db7ef3e3ad37e03d"}))),e("div",{key:"78deb8ecfbacb2577219ee0859a45a5da7f93d8b",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:Boolean(this.secondaryContentPadding)?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:Boolean(this.secondaryContentPaddingBlockEnd)?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:Boolean(this.secondaryContentPaddingBlockStart)?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:Boolean(this.secondaryContentPaddingInlineEnd)?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:Boolean(this.secondaryContentPaddingInlineStart)?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},e("slot",{key:"cd72bf9a5874503c9bc7b17733b6fbe84ce6cae4",name:"secondary-content"}))),e("div",{key:"0ca496f691300e9fbc4ee6a6b867b6501c1f292a",class:"modal__custom-footer"},e("slot",{key:"e428f004ed058339b520198f110064e625f8e03b",name:"custom-footer"})),a&&e("footer",{key:"d457989e84d2e354abd444f27458dab14021cb8b",class:"modal__controls"},e("swirl-button-group",{key:"74b3bba2bb32d70f080de8f7e212385805fc1a49",wrap:!0},this.secondaryActionLabel&&e("swirl-button",{key:"7fcfe9e269a81e0fcb9039a52071878c58951a78",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&e("swirl-button",{key:"da1cb3c478d8f0d8bf41c4e6adfd76d2e16966ec",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return t(this)}};n.style=":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var( --s-surface-overlay-default );--swirl-resource-list-item-background-hovered:var( --s-surface-overlay-hovered );--swirl-resource-list-item-background-pressed:var( --s-surface-overlay-pressed );--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) var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) 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);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out, 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}.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)}}";export{n as swirl_modal}
|