@govtechsg/sgds-web-component 3.1.1 → 3.1.2

package/components/Badge/sgds-badge.d.ts

@@ -9,7 +9,9 @@ export type BadgeVariant = "info" | "success" | "danger" | "warning" | "neutral"
  * @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
  */
 export declare class SgdsBadge extends SgdsElement {
     static styles: import("lit").CSSResult[];

package/components/Badge/sgds-badge.js

@@ -3,9 +3,9 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
-import css_248z from './badge.js';
-import { watch } from '../../utils/watch.js';
 import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+import { watch } from '../../utils/watch.js';
+import css_248z from './badge.js';
 
 /**
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
@@ -14,7 +14,9 @@ import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.j
  * @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() {
@@ -34,7 +36,24 @@ class SgdsBadge extends SgdsElement {
     }
     /**@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

package/components/Badge/sgds-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.js","sources":["../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted after the badge closes.\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":";;;;;;;;;AASA;;;;;;;;AAQG;AACG,MAAO,SAAU,SAAQ,WAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;;QAS8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAG5B,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KA0CjE;;IAvCQ,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvD,IAAI,CAAA,CAAA;;;AAGA,UAAA,EAAA,QAAQ,CAAC;AACP,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;AACvC,gBAAA,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;AAExC,YAAA,EAAA,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,CAA2B,yBAAA,CAAA,GAAG,OAAO,CAAA;;;;;AAK7D,YAAA,EAAA,IAAI,CAAC,WAAW;kBACd,IAAI,CAAA,CAAA;;;AAGO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAE,OAAO,CAAA;;AAEd,QAAA,CAAA;cACD,OAAO,CAAC;KACb;;AA1DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAEpD;AACO,SAAA,CAAA,YAAY,GAAG;AACpB,IAAA,mBAAmB,EAAE,eAAe;AACrC,CAFkB,CAEjB;AAG0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQhE,UAAA,CAAA;IADC,KAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-badge.js","sources":["../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":"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"}

package/components/ComboBox/index.umd.js

@@ -8993,9 +8993,7 @@
       };
   }
 
-  var css_248z$7 = 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}`;
-
-  var css_248z$6 = 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$7 = 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)}`;
 
   /**
    *
@@ -9062,7 +9060,7 @@
     `;
       }
   }
-  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$6];
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$7];
   __decorate([
       property({ type: String })
   ], SgdsCloseButton.prototype, "ariaLabel", void 0);
@@ -9073,6 +9071,8 @@
       property({ type: String, reflect: true })
   ], SgdsCloseButton.prototype, "variant", void 0);
 
+  var css_248z$6 = 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.
    *
@@ -9080,7 +9080,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() {
@@ -9100,7 +9102,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
@@ -9133,7 +9152,7 @@
               : nothing;
       }
   }
-  SgdsBadge.styles = [...SgdsElement.styles, css_248z$7];
+  SgdsBadge.styles = [...SgdsElement.styles, css_248z$6];
   /**@internal */
   SgdsBadge.dependencies = {
       "sgds-close-button": SgdsCloseButton
@@ -12081,7 +12100,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(";");
       }
@@ -12180,7 +12200,7 @@
                       variant="neutral"
                       show
                       dismissible
-                      @sgds-hide=${() => this._handleBadgeDismissed(item)}
+                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}
                       >${item.label}</sgds-badge
                     >`)}
               `