@govtechsg/sgds-web-component 3.1.1 → 3.1.2

package/components/Badge/index.umd.js

@@ -4268,45 +4268,6 @@
   /** @internal */
   SgdsElement.dependencies = {};
 
-  var css_248z$1 = css`:host{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
-
-  // @watch decorator
-  //
-  // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
-  //
-  // To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
-  // watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
-  //
-  // Usage:
-  //
-  //  @watch('propName')
-  //  handlePropChange(oldValue, newValue) {
-  //    ...
-  //  }
-  function watch(propName, options) {
-      const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
-      return (proto, decoratedFnName) => {
-          // @ts-expect-error -- update is a protected property
-          const { update } = proto;
-          if (propName in proto) {
-              const propNameKey = propName;
-              // @ts-expect-error -- update is a protected property
-              proto.update = function (changedProps) {
-                  if (changedProps.has(propNameKey)) {
-                      const oldValue = changedProps.get(propNameKey);
-                      const newValue = this[propNameKey];
-                      if (oldValue !== newValue) {
-                          if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
-                              this[decoratedFnName](oldValue, newValue);
-                          }
-                      }
-                  }
-                  update.call(this, changedProps);
-              };
-          }
-      };
-  }
-
   /**
    * @license
    * Copyright 2018 Google LLC
@@ -4320,7 +4281,7 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
-  var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+  var css_248z$1 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
   /**
    *
@@ -4387,7 +4348,7 @@
     `;
       }
   }
-  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z];
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$1];
   __decorate([
       property({ type: String })
   ], SgdsCloseButton.prototype, "ariaLabel", void 0);
@@ -4398,6 +4359,45 @@
       property({ type: String, reflect: true })
   ], SgdsCloseButton.prototype, "variant", void 0);
 
+  // @watch decorator
+  //
+  // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
+  //
+  // To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
+  // watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+  //
+  // Usage:
+  //
+  //  @watch('propName')
+  //  handlePropChange(oldValue, newValue) {
+  //    ...
+  //  }
+  function watch(propName, options) {
+      const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
+      return (proto, decoratedFnName) => {
+          // @ts-expect-error -- update is a protected property
+          const { update } = proto;
+          if (propName in proto) {
+              const propNameKey = propName;
+              // @ts-expect-error -- update is a protected property
+              proto.update = function (changedProps) {
+                  if (changedProps.has(propNameKey)) {
+                      const oldValue = changedProps.get(propNameKey);
+                      const newValue = this[propNameKey];
+                      if (oldValue !== newValue) {
+                          if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                              this[decoratedFnName](oldValue, newValue);
+                          }
+                      }
+                  }
+                  update.call(this, changedProps);
+              };
+          }
+      };
+  }
+
+  var css_248z = css`:host{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+
   /**
    * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
    *
@@ -4405,7 +4405,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() {
@@ -4425,7 +4427,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
@@ -4458,7 +4477,7 @@
               : nothing;
       }
   }
-  SgdsBadge.styles = [...SgdsElement.styles, css_248z$1];
+  SgdsBadge.styles = [...SgdsElement.styles, css_248z];
   /**@internal */
   SgdsBadge.dependencies = {
       "sgds-close-button": SgdsCloseButton