@govtechsg/sgds-web-component 3.1.1 → 3.1.2

package/components/index.umd.js

@@ -7762,7 +7762,9 @@
    * @slot icon - The slot for icon to the left of the badge text
    *
    * @event sgds-show - Emitted when the badge appears.
-   * @event sgds-hide - Emitted after the badge closes.
+   * @event sgds-hide - Emitted when the badge is starting to close but has not closed.
+   * @event sgds-after-show - Emitted after the badge has appeared
+   * @event sgds-after-hide - Emitted after the badge has closed
    */
   class SgdsBadge extends SgdsElement {
       constructor() {
@@ -7782,7 +7784,24 @@
       }
       /**@internal */
       _handleShowChange() {
-          this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
+          if (this.show) {
+              const sgdsShow = this.emit("sgds-show", { cancelable: true });
+              if (sgdsShow.defaultPrevented) {
+                  this.show = false;
+                  return;
+              }
+              // animations if any go here
+              this.emit("sgds-after-show");
+          }
+          else {
+              const sgdsHide = this.emit("sgds-hide", { cancelable: true });
+              if (sgdsHide.defaultPrevented) {
+                  this.show = true;
+                  return;
+              }
+              // animations if any go here
+              this.emit("sgds-after-hide");
+          }
       }
       render() {
           return (this.dismissible && this.show) || !this.dismissible
@@ -13777,7 +13796,8 @@
           this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);
           this.value = this.selectedItems.map(i => i.value).join(";");
       }
-      async _handleBadgeDismissed(item) {
+      async _handleBadgeDismissed(e, item) {
+          e.preventDefault();
           this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);
           this.value = this.selectedItems.map(i => i.value).join(";");
       }
@@ -13876,7 +13896,7 @@
                       variant="neutral"
                       show
                       dismissible
-                      @sgds-hide=${() => this._handleBadgeDismissed(item)}
+                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}
                       >${item.label}</sgds-badge
                     >`)}
               `
@@ -25102,7 +25122,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.
@@ -25110,7 +25130,7 @@
   function unlockBodyScrolling(lockingEl) {
       locks.delete(lockingEl);
       if (locks.size === 0) {
-          document.body.classList.remove("sl-scroll-lock");
+          document.body.style.overflow = "";
       }
   }
 
@@ -26292,9 +26312,9 @@
       });
   }
 
-  const LG_BREAKPOINT = 1024;
-  const MD_BREAKPOINT = 768;
   const SM_BREAKPOINT = 512;
+  const MD_BREAKPOINT = 768;
+  const LG_BREAKPOINT = 1024;
   const XL_BREAKPOINT = 1280;
   const XXL_BREAKPOINT = 1440;
 
@@ -27218,7 +27238,7 @@
       }
   }
 
-  var css_248z$o = 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$o = 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}`;
 
   /**
    * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
@@ -27283,7 +27303,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;
@@ -27427,20 +27447,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>