@govtechsg/sgds-web-component 3.1.1 → 3.1.2

package/components/Modal/index.umd.js

@@ -4699,7 +4699,7 @@
    */
   function lockBodyScrolling(lockingEl) {
       locks.add(lockingEl);
-      document.body.classList.add("sl-scroll-lock");
+      document.body.style.overflow = "hidden";
   }
   /**
    * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
@@ -4707,7 +4707,7 @@
   function unlockBodyScrolling(lockingEl) {
       locks.delete(lockingEl);
       if (locks.size === 0) {
-          document.body.classList.remove("sl-scroll-lock");
+          document.body.style.overflow = "";
       }
   }
 
@@ -4802,12 +4802,15 @@
       property({ type: String, reflect: true })
   ], SgdsCloseButton.prototype, "variant", void 0);
 
-  var css_248z$2 = css`:host([size=sm]) .modal-panel{max-width:480px}:host([size=lg]) .modal-panel{max-width:800px}:host([size=fullscreen]) .modal-panel{max-width:1128px}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;margin:var(--sgds-spacer-9) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-9) - var(--sgds-spacer-9));max-width:640px;position:relative;width:100%}.modal-panel:focus{outline:none}@media screen and (max-width:420px){.modal-panel{margin:var(--sgds-spacer-8) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-8) - var(--sgds-spacer-8))}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;padding:var(--sgds-padding-xl)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;overflow:auto;padding:0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding:var(--sgds-padding-xl)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+  var css_248z$2 = css`:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:var(--sgds-margin-sm) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-sm) - var(--sgds-margin-sm));position:relative;width:100%}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-sm)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-md);max-height:calc(100% - var(--sgds-margin-md) - var(--sgds-margin-md))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));max-width:var(--sgds-dimension-896)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1176)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1320)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 
   var css_248z$1 = css`.h1,.h2,.h3,.h4,.h5,.h6 ::slotted(h6),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),h1,h2,h3,h4,h5,h6{color:var(--sgds-heading-color);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,::slotted(h1),h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,::slotted(h1),h1{font-size:2.5rem}}.h2,::slotted(h2),h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,::slotted(h2),h2{font-size:2rem}}.h3,::slotted(h3),h3{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h3,::slotted(h3),h3{font-size:1.5rem}}.h4,::slotted(h4),h4{font-size:1.125rem}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{font-size:1rem}.h1,::slotted(h1),h1{line-height:1.2}.h2,::slotted(h2),h2{line-height:1.25}.h3,::slotted(h3),h3{line-height:1.33}.h4,::slotted(h4),h4{line-height:1.78}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{line-height:1.2}`;
 
   var css_248z = css`svg{vertical-align:middle}`;
 
+  const SM_BREAKPOINT = 512;
+  const MD_BREAKPOINT = 768;
+
   /**
    * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
    *
@@ -4871,7 +4874,7 @@
               return;
           if (buttonElements.length <= 1)
               return;
-          if (panelWidth <= 360) {
+          if (panelWidth < SM_BREAKPOINT || (this.size === "fullscreen" && panelWidth < MD_BREAKPOINT)) {
               buttonElements.forEach(buttonElement => {
                   const button = buttonElement;
                   button.fullWidth = true;
@@ -5015,20 +5018,22 @@
           aria-labelledby="title"
           tabindex="-1"
         >
-          <div class="modal-header">
-            <div class="modal-header__title-description">
-              <slot class="modal-title" id="title" name="title"></slot>
-              <slot name="description"></slot>
+          <div class="modal-content">
+            <div class="modal-header">
+              <div class="modal-header__title-description">
+                <slot class="modal-title" id="title" name="title"></slot>
+                <slot name="description"></slot>
+              </div>
+              <sgds-close-button
+                class="modal-header__close"
+                @click="${() => this.requestClose("close-button")}"
+                ariaLabel="close modal"
+              ></sgds-close-button>
             </div>
-            <sgds-close-button
-              class="modal-header__close"
-              @click="${() => this.requestClose("close-button")}"
-              ariaLabel="close modal"
-            ></sgds-close-button>
-          </div>
-          <div class="modal-body">
-            <slot></slot>
-          </div>
+            <div class="modal-body">
+              <slot></slot>
+            </div>
+          </div class="modal-content">
           <div class="modal-footer">
             <slot name="footer"></slot>
           </div>